微信小程序-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!!!

特此记录, 欢迎一起讨论~