vue transition 结合 animate.css 实现动画过渡

js yekong

Vue 提供了 transition 的封装组件,可以给任何元素和组件添加进入/离开过渡;我们可以结合animate.css来实现我们想要的效果。animate动画可实现的效果有很多,我们可以查看animate.css演示

安装animate.css

npm install animate.css –-save

如果新版的animate不生效的话,可能是样式名变了,
需要得加上 animate__ 前缀才可以正常运行。
名称从animated fadeIn变为了 animate__animated animate__fadeIn ,将名称修改一下就可以了。

引用animate.css

import 'animate.css'

html代码

<transition enter-active-class="animated tada" leave-active-class="animated bounceOutRight" >
     <p v-if="show">hello word,I love China</p>
</transition>
喜欢