文章目录 1 过渡与动画1.1 自定义动画1.2 使用第三方动画 1 过渡与动画 1.1 自定义动画本专栏将从基础开始,循序渐进的讲解Vue的基本概念以及使用,希望大家都能够从中有所收获,也请大家多多支持。
专栏地址: Vue专栏
相关软件地址: 相关安装包地址
如果文章知识点有错误的地方,请指正!大家一起学习,一起进步。
在进入/离开的过渡中,会有 6 个 class 切换。
v-enter:定义进入过渡的开始状态。v-enter-active:定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to:定义进入过渡的结束状态。v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。v-leave-active:定义离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。v-leave-to:定义离开过渡的结束状态。其中v是定义的transition标签的名字,具体的动画过程如下图所示,其中Opacity是透明度的意思:
使用示例:<template>
<div class="anim">
<button v-on:click="show = !show">Button</button>
<!-- 淡入淡出-->
<transition name="myFade">
<h1 v-if="show">hello</h1>
</transition>
<!-- 变大变小-->
<transition name="trans">
<h1 class="big" v-if="show">hello</h1>
</transition>
<!-- 动画-->
<transition name="myAni">
<h1 class="big" v-if="show">hello</h1>
</transition>
</div>
</template>
<script>
export default {
name: "animDemo",
data(){
return{
show:true
}
}
}
</script>
<style scoped>
/*淡入淡出效果*/
/*Opacity为0的状态*/
.myFade-enter,.myFade-leave-to{
opacity: 0;
}
/*淡入淡出效果*/
/*Opacity为1的状态*/
.myFade-enter-to,.myFade-leave{
opacity: 1;
}
/*淡入淡出效果*/
/*过渡*/
.myFade-enter-active,.myFade-leave-active{
transition: opacity 3s;
}
.big{
width: 100px;
height: 100px;
background: aquamarine;
}
/*变大变小*/
/*Opacity为0的状态*/
.trans-enter,.trans-leave-to{
opacity: 0;
width: 0;
height: 0;
}
/*变大变小*/
/*Opacity为1的状态*/
.trans-enter-to,.trans-leave{
opacity: 1;
width: 100px;
height: 100px;
}
/*变大变小*/
/*过渡*/
.trans-enter-active,.trans-leave-active{
transition: all 3s;
}
/*动画*/
/*Opacity为0的状态*/
.myAni-enter,.myAni-leave-to{
}
/*动画*/
/*Opacity为1的状态*/
.myAni-enter-to,.myAni-leave{
}
/*动画*/
/*过渡*/
.myAni-enter-active{
animation: bounce-in 1s;
}
.myAni-leave-active{
animation: bounce-out 1s;
}
/*关键帧动画,show=true*/
@keyframes bounce-in {
0%{
transform: scale(0);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
/*关键帧动画,show=false*/
@keyframes bounce-out {
0%{
transform: scale(1);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(0);
}
}
</style>
1.2 使用第三方动画
引入第三方动画js
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
如下图所示:
从以下网址选取想要的样式:https://www.swiper.com.cn/usage/animate/index.html
使用样式:代码如下图:
<transition
name="custom-classes-transition"
enter-active-class="animated rotateIn"
leave-active-class="animated zoomOutDown"
>
<h1 class="big" v-if="show">hello</h1>
</transition>
需要注意的是,如果不脱离文档流,页面会发生抖动,如下图右边栏所示:
所以需要通过div把动画脱离文档流,代码如下所示:
<transition
name="custom-classes-transition"
enter-active-class="animated rotateIn"
leave-active-class="animated zoomOutDown"
>
.big{
width: 100px;
height: 100px;
background: aquamarine;
/*脱离文档流*/
position:fixed;
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)