vue 展开收起动画

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mhlghy/article/details/79894440

最近在开发项目过程中遇到一个比较棘手的问题，那就是css3在webview中的兼容性问题。导致第三方组件在低版本手机浏览器中样式错乱（高版本显示正常），无奈之下使用css2解决了样式问题，但是，原本组件使用了css3的transition3d来实现动画效果，我更换样式后，随之动画效果也没了，那就自己动手写呗！！！（移动设备更新换代的很快，目前各种手机的最新版本系统已经支持css3的大部分效果，相信在未来对css3的支持可以达成统一 [期待中。。。]）

因为我用的组件是Mint UI中的popup下侧弹出，下面我们直接看代码，

页面.vue

<mt-popup v-model="popupVisible"  position="bottom">
   <transition name="toTop" class="toTop">
     <mt-picker :slots="slots" @change="onValuesChange" v-show="popupVisible"></mt-picker>
     </transition>
</mt-popup>

动画效果

@keyframes identifier {
 from {transform: translateY(100%);}
 to {transform: translateY(0%);}
}
@keyframes against {
 from {transform: translateY(0%);}
 to {transform: translateY(100%);}
}


.toTop-enter-active {
  animation: identifier .4s;
}
.toTop-leave-active {
  animation: against .4s ;
}

注：此动画适用于所有展开收起效果。