Vue的动画实现

一，Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。 组件进入和离开 DOM 的钩子 使用内置的 <transition> 组件

示例，做一个切换图片的案例，加上动画效果，不会突兀的显示与隐藏

HTML代码：

一定要用<transition></transition>标签包裹要做动画效果的元素！

CSS代码：

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter-from 进入开始 v-enter-to 进入结束 v-enter-active进入整个状态

v-leave-from 离开开始  v-leave-to 离开结束   v-leave-active离开整个状态

javascript（Vue）代码：

 页面效果：

 

当我点击按钮时，图片会间隔1s淡入淡出 

再用关键帧动画做一个切换图片的案例，HTML代码和上面的一致

CSS代码改动如下

页面效果：

 

还可以引入第三方动画库，接下来的案例我用到了Animate.css 一款强大的预设css3动画库 

网站，制作的前提是一定要引入该网站的css文件

 

HTML代码

 页面效果：

 以上就是vue动画组件的使用，希望能对你有所帮助，感谢阅读