小程序中实现翻牌效果时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;背面则反之