17css动画
1.过渡
<style> /* 1.当显示动画开始时，会添加fade-enter和fade-enter-active 当动画第一帧结束，运行到第二帧的时候，会删除掉fade-enter,添加fade-enter-to 执行到结束，会把fade-enter-active和fade-enter-to去掉 注意：样式开头都为fade是因为我们给transition取名为fade 2.当在隐藏开始的时候，会添加fade-leave和fade-leave-active 当动画第一帧结束，运行到第二帧的时候，会删除掉fade-leave,添加fade-leave-to 执行到结束，会把fade-leave-active和fade-leave-to去掉 */ .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } </style> <body> <div id="root"> <!-- 这个名字可以随便取 --> <transition name="fade"> <div v-if="show">hello world</div> </transition> <button @click="handleChange">切换</button> </div> </body> <script> var vm=new Vue({ el:'#root', data:{ type:"child-one", show:true }, methods:{ handleChange:function(){ this.show=!this.show; } } }) </script>
2.自定义类名
enter-classenter-active-classenter-to-class(2.1.8+)leave-classleave-active-classleave-to-class(2.1.8+)
<style> @keyframes bounce-in{ 0%{ transform: scale(0); } 50%{ transform: scale(1.5); } 100%{ transform: scale(1); } } .active{ transform-origin: left center; animation: bounce-in 1s; } .leave{ transform-origin: left center; animation: bounce-in 1s reverse; } </style> <body> <div id="root"> <!-- 自定义类名 --> <transition name="fade" enter-active-class="active" leave-active-class="leave"> <div v-if="show">hello world</div> </transition> <button @click="handleChange">切换</button> </div> </body>
3.使用animate.css
https://animate.style/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <body> <div id="root"> <!-- 自定义类名 --> <transition name="fade" enter-active-class="animate__animated animate__wobble" leave-active-class="animate__animated animate__rubberBand"> <div v-if="show">hello world</div> </transition> <button @click="handleChange">切换</button> </div> </body>
4.元素第一次显示的动画效果，添加appear,appear-active-class
<transition name="fade" appear appear-active-class="animate__animated animate__wobble" enter-active-class="animate__animated animate__wobble" leave-active-class="animate__animated animate__rubberBand" > <div v-if="show">hello world</div> </transition>
5.同时使用过渡和动画
在自定义类中加入类名
<style> .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 3s; } </style> <body> <div id="root"> <!-- 自定义类名 --> <transition name="fade" appear appear-active-class="animate__animated animate__wobble" enter-active-class="animate__animated animate__wobble fade-enter-active" leave-active-class="animate__animated animate__rubberBand fade-leave-active" > <div v-if="show">hello world</div> </transition> <button @click="handleChange">切换</button> </div> </body>
当自己写的样式过渡时间（3s）和animate.css过渡时间（默认1s）有冲突时，可以自己设置时间
<transition type="transition" name="fade" appear appear-active-class="animate__animated animate__wobble" enter-active-class="animate__animated animate__wobble fade-enter-active" leave-active-class="animate__animated animate__rubberBand fade-leave-active" > <div v-if="show">hello world</div> </transition>
type="transition"的意思时说当有animate设置的时长和transition设置的时长时，以transition的时长为准。
6.我们还可以控制类消失的时间,
:duration
<transition :duration="5000" name="fade" appear appear-active-class="animate__animated animate__wobble" enter-active-class="animate__animated animate__wobble fade-enter-active" leave-active-class="animate__animated animate__rubberBand fade-leave-active" >
当动画在1秒执行完毕后，在dom节点上，类名比如：animate__animated animate__wobble fade-enter-active会等到5秒后才会被替换为其它。
7.javascript钩子
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition>
methods: { // -------- // 进入中 // -------- beforeEnter: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 离开时 // -------- beforeLeave: function (el) { // ... }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... } }
例子：元素在显示的时候由红色便绿，再变黑
<body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="enter"
@after-enter="handleAfterEnter"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleChange">切换</button>
</div>
</body>
<script>
var vm=new Vue({
el:'#root',
data:{
type:"child-one",
show:true
},
methods:{
handleChange:function(){
this.show=!this.show;
},
handleBeforeEnter:function(el){
//在元素进入的一瞬间执行
console.log("进入")
el.style.color='red'
},
enter:function(el,done){
//handleBeforeEnter结束
setTimeout(()=>{
el.style.color='green'
},2000)
setTimeout(()=>{
done()//告诉vue done执行完了
},4000)
},
handleAfterEnter:function(el){
el.style.color='#000'
}
}
})
</script>
8.js使用的动画库，velocity.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
methods:{ handleChange:function(){ this.show=!this.show; }, handleBeforeEnter:function(el){ el.style.opacity=0; }, enter:function(el,done){ //Velocity执行完这个函数后就会执行complete //Velocity 接收一组 css 属性键值对 (css map) 作为它的第一个参数，该参数作为动画效果的最终属性。第二个参数是可选参数 为动画的额外配置项。 Velocity(el,{opacity:1},{duration:1000,complete:done}) }, handleAfterEnter:function(el){ } }
9.多个元素的过渡动画
<style> .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-active, .fade-leave-active{ transition: opacity 1s; } </style> <body> <div id="root"> <transition name="fade" > <!-- 加key值避免复用元素，导致过渡动画失效 --> <div v-if="show" key='hello'>hello world</div> <div v-else key='bey'>bey world</div> </transition> <button @click="handleChange">切换</button> </div> </body>
10.设置过渡模式
同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式
-
in-out：新元素先进行过渡，完成之后当前元素过渡离开。 -
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>
