5-1.Vue 中Css动画原理: 过渡动画效果
<transition></transition>未开始时候添加两个CSS类。给起的名字name="fade"
.fade-enter 动画第二帧就移除
.fade-enter-active,动画结束时移除
代码如下:代码为执行时的一瞬间。
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition:opacity 1s;
}
</style>
<body>
<div id="root">
<transition >
<div v-if="show">helloword</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm=new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show= !this.show
}
}
})
</script>
5-2.使用animate.css库
前提利用@keyframe实现放大缩小,同时可以使用自定义的类,如下.active,和.leave,
所以我们也可以使用animate.css的库。
@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">helloword</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm=new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show= !this.show
}
}
})
</script>
animate.css库:
自定义的Css 中的Class
<div id="root">
<transition
name="fade"
appear
enter-active-class="animated shake"
leave-active-class="animated bounceOut"
appear-active-class="animated swing"
>
<div v-if="show">helloword</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm=new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show= !this.show
}
}
})
</script>
5-3在Vue中使用过度和动画
<style>
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition:opacity 3s;
}
</style>
<div id="root">
<transition
:duration="{enter:5000,leave:10000}"
name="fade"
appear
enter-active-class="animated shake fade-enter-active"
leave-active-class="animated bounceOut fade-leave-active"
appear-active-class="animated swing"
>
<div v-if="show">helloword</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm=new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show= !this.show
}
}
})
</script>
5-4Vue中的js动画,Velocity
入场动画js钩子:出场动画钩子,响应改为leave就好。
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-if="show">helloword</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm=new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show= !this.show
},
handleBeforeEnter:function(el){
el.style.color='red';
//接收el参数
},
handleEnter:function(el,done){
//beforeEnter结束后.
setTimeout(()=>{
el.style.color='green';
},2000)
setTimeout(()=>{
done();
},4000)
},
handleAfterEnter:function (el){
el.style.color='#000';
}
}
})
</script>
Velocity的应用,需要在duration:1000,1秒后,添加done(),调动after-enter
body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-if="show">helloword</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm=new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show= !this.show
},
handleBeforeEnter:function(el){
el.style.opacity = 0
//接收el参数
},
handleEnter:function(el,done){
//beforeEnter结束后.
Velocity(el,
{opacity:1},
{
duration:1000,
complete:done
})
},
handleAfterEnter:function (el){
el.style.color='red';
}
}
})
</script>
</body>
Vue.js学习开发五-----Vue动画
最新推荐文章于 2023-07-13 14:48:24 发布