vue中的动画使用
vue中有一套自己的过渡动画效果，官网查看：https://cn.vuejs.org/v2/guide/transitions.html
1.transition
<transition></transition>标签内包裹的是可以过渡的元素或组件
条件为：1.必须是动态组件，v-show/v-if
2.transition包裹根组件，
transition中提供6个类名，完成过渡的动画效果
- v-enter 进入动画的开始状态
- v-enter-active 进入的过程中
- v-enter-to 进入动画的结束状态
- v-leave 离开动画的开始过程
- v-leave-active 离开动画的过程中
- v-leave-to 离开之后的状态
上述类名配合css3过渡或动画效果，即可完成。
其中，如果transition标签的name命名了，比如name=‘fade’ ，则上述类名替换为 fade-enter,
/*入场前状态*/ .fade-enter, .fade-leave-to{ opacity: 0; } /* 过渡*/ .fade-enter-active, .fade-leave-active{ transition: opacity 0.5s; } /*动画*/ .ant-enter-active { animation: bounce-in 0.5s; } .ant-leave-active { animation: bounce-in 0.5s reverse } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } </style> </head> <body> <div id="app"> <button @click="toggle">切换</button> <transition name="fade"> <div v-show="show">Hello world</div> </transition> <transition name="ant"> <div v-show="show">css动画</div> </transition> </div> <script> var app = new Vue({ el: '#app', data: function (){ return { show: true } }, methods: { toggle () { this.show = ! this.show } } }) </script> </body>
2.transitionGroup 列表过渡
transitionGroup和transition的差别在于，如果其中有多个组件，就不可使用transition，需要使用transitionGroup
<style> .list-item{ display: inline-block; margin-right: 10px; } .list-enter-active,.list-leave-active{ transition: all 1s; } .list-enter, .list-leave-to{ opacity: 0; transform: translateY(30px) } </style> </head> <body> <div id="app"> <button @click="add">Add</button> <button @click="remove">Remove</button> <transition-group name="list" tag="p"> <span v-for="item in items" :key="item" class="list-item"> {{item}} </span> </transition-group> </div> <script> var app = new Vue({ el: "#app", data: function (){ return { items:[1,2,3,4,5,6,7,8,9], nextNum: 10 } }, methods: { randomIndex(){ return Math.floor(Math.random()* this.items.length) }, add() { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove(){ this.items.splice(this.randomIndex(), 1) } }, }) </script> </body>
3.js钩子函数
可以在transition属性中声明javascript钩子，使用js实现动画
- before-enter(el){} 动画开始前，设置初始状态
- enter(el，done){} 执行动画
- after-enter(el){} 动画结束，清除工作
- enter-cancelled(el){} 取消动画
- before-leave(el){}
- leave(el，done){}
- after-leave(el){}
- leave-cancelled(el){}
其中，el表示transition下方组件，done是一个结束的回调函数，表示过渡完成。下方案例显示了done的作用。
<style> .fade-enter-active, .fade-leave-active{ transition: opacity 0.5s; } </style> </head> <body> <div id="app"> <button @click="toggle">toggle</button> <transition name="fade" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave"> <div v-show="show"> hello world! </div> </transition> </div> <script> var app = new Vue({ el: '#app', data: function () { return { show: true } }, methods: { toggle (){ this.show =! this.show; }, //进入前,动画初始状态 beforeEnter(el) { el.style.opacity = 0; }, //动画结束状态 enter(el, done) { el.style.opacity = 1; // 监听动画结束事件，执行done，如果没有监听结束事件，上述确实会正常显示隐藏，但是div模块始终占据位置 el.addEventListener('transitionend', done) }, // 离开前状态 beforeLeave (el) { el.style.opacity = 1; }, // 离开后状态 leave(el,done){ el.style.opacity = 0; el.addEventListener('transitionend', done) } }, }) </script> </body>
4.引入animate.css动画
最后一种动画比较简单，通过引入animate.css直接实现动画效果，
-
enter-active-class: 动画进入过程的动画
-
leave-active-class: 动画离开过程的动画
animate.css官网： http://www.jq22.com/yanshi819
<!-- 引入CSS动画库 -->
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<button @click="toggle">toggle</button>
<transition enter-active-class="animated bounceInLeft"
leave-active-class="animated bounceOutLeft">
<div v-show="show">hellow world</div>
</transition>
</div>
<script>
var app = new Vue ({
el: '#app',
data() {
return {
show: false
}
},
methods: {
toggle() {
this.show =! this.show
}
},
})
</script>
</body>
