vue过渡动画和使用animate.css
通过transition标签包裹实现
- 一个transition中只能放一个过渡元素(多个过渡元素只有第一个生效)
- 让进入页面就执行过渡效果,给transition标签添加appear属性
1.过渡的类名
单一过渡实现
<button v-on:click = "show = !show">点我</button>
<transition appear>
<p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
多个不同的过渡
- 给transition添加name属性
- 过渡类名中的v换成name的属性值
<button v-on:click = "show = !show">点我</button>
<transition name = "fade" appear>
<p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
2.通过JavaScript 钩子实现过渡动画
- 注意执行done(),否则后面的after钩子函数不执行
- 如果刚打开页面就执行动画, done() 需要延时执行
- 如果使用钩子函数,需要给transition添加v-bind:css=“false”,否则他会去查找过渡的几个类名
- **在动画执行过程中必须写上 el.offsetWidth或者el.offserHeigh **
<button v-on:click = "show = !show">点我</button>
<transition appear
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
methods:{
beforeEnter: function (el) {
},
enter: function (el, done) {
el.style.transition:"all 3s"
el.offserHeight
done()
},
afterEnter: function (el) {
el.style.maginLeft = "500px"
},
}
使用velocity实现过渡动画(JavaScript 钩子实现)
<button v-on:click = "show = !show">点我</button>
<transition appear
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
methods:{
beforeEnter: function (el) {
},
enter: function (el, done) {
Velocity(el,{opcity:1,marginLeft:'500px'},3000)
done()
},
afterEnter: function (el) {
},
}
3. 使用自定义class名实现过渡动画(可以通过这种方式使用animate.css库)
<button v-on:click = "show = !show">点我</button>
<transition appear
enter-class=""
enter-active-class="animated bounceOutRight"
enter-to-class="">
<p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
让v-for循环出来的的数据都有过渡效果
- 使用transition-group标签,用法和transition一致
本文标签：
动画Vuecssanimate
发表评论