小程序中实现翻牌效果时display渲染的问题

Question

想实现翻牌效果，遇到这样的问题：在初次渲染时，假如display初始值为none，后期通过setdata的方式修改display值为block的时候，对应的区块里面的东西依然不显示，但是如果初始值为block时通过setdata控制显示隐藏则没问题，但是由于需要实现翻牌效果，必然有一个区块需要默认为none，前端新手不知道怎么破，求大神指点，写个小例子，感激不尽#膜拜#

我的代码段：

  <block wx:for="{{list}}" wx:key="{{index}}">
    <view class="container-body-box-item">
      <view class="front" style="display:{{front_display_1}};width:{{front_width_1}}">
        <image src="../../images/flipbtn.png" mode="widthFix" bindtap="fliptoback"></image>
        //正面内容...
      </view>
      <view class="back" style="display:{{backt_display_1}};width:{{back_width_1}}">
        <image src="../../images/flipbtn.png" mode="widthFix" bindtap="fliptofront"></image>
        //背面内容...
      </view>
    </view>
  </block> 

由于需要是使用在列表中的，初次渲染，正面都是默认显示，同时width为100%，当点击bindtap时（每个bindtap都设置了dataset：data-front_display_1，data-front_width_1，data-back_display_1，data-back_width_1，这个数字1是循环时候的商品id）,正面的width从100%缩小到0，然后display:none;背面则反之

Answer 1

wxml

  <view class="container-body-box-item {{isInFront?'':'show-back'}}" bindtap="flipCard">
    <view class="front">
      <view>正面正面</view>
    </view>
    <view class="back">
      <view>背面背面</view>
    </view>
  </view>

wxss

.container-body-box-item{
  width: 200px;
  height: 200px;
  transform:perspective(800px) rotateY(0deg);
  transition:1s;
  transform-style:preserve-3d;
}
.container-body-box-item.show-back{
  transform:perspective(800px) rotateY(-180deg);
}
.front, .back{
  width: 100%;
  height: 100%;
  left:0;
  top: 0;
  color: #fff;
}
.front{
  background: pink;
  position: absolute;
  transform:translateZ(1px);
}
.back{
  background: yellowgreen;
  transform:translateZ(-1px) rotateY(180deg);
}

js

data: {
    isInFront: true
}

...

 flipCard: function(){
    this.setData({
      isInFront: !this.data.isInFront
    })
 }