微信小程序-animation動畫踩坑

animation動畫

　　最近在微信小程序, 開發自定義tabBar時,想要在菜單激活的時候做一個放大的效果,類似頭條app底部導航.

　　但是, 涉及到css animation動畫的時候有個奇怪的現象: 動畫在開發工具上正常, 但在IOS上有時候失效, 使用微信提供的API又比較麻煩.

　　經過不斷嘗試, 最后發現, 使用條件渲染v-if(uniapp)或wx:if(微信原生)來激活css中的動畫在IOS上能正常顯示.

　　

<div>
    <view
      class="tab-bar"
      :style="{paddingBottom:isIPX?'60rpx':'0'}"
    >
      <view
        class="menu-item"
        v-for="(item,i) in menuList"
        :key="i"
        @click='toMenu(i)'
      >
        
　　　　　　 <!-- 關鍵在這里 -->
　　　　　　 <i class="iconfont animat" :class="item.iconSelected" v-if="active===item.id" />
        <i class="iconfont" :class="item.iconUnSelected" v-else />
        <!-- <i :class="active==item.id?`iconfont ${item.iconSelected} animat`:`iconfont ${item.iconUnSelected}`" /> -->
        <text :style="active==item.id?'color:#008EFF':''">{{item.text}}</text>
      </view>
    </view>
  </div>

注釋的那一行不生效, 在安卓,開發工具上都正常, 但在IOS上不生效. 換成條件渲染后iOS上也成功生效了, nice!!!

特此記錄, 歡迎一起討論~