嗨咯!这里是小M. (努力学习VUE版)
今天浅浅分享一下 VUE中的 动画和过渡
动画和过渡是两种不同的概念,但是能够实现相同的动效,或者结合起来使用。
1.基本使用方法
先来看看VUE官方文档
Vue 提供了
transition
的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
- 条件渲染 (使用
v-if
)- 条件展示 (使用
v-show
)- 动态组件
- 组件根节点
下面的例子采用v-show
transiton标签和template标签一样,不会真实的出现在DOM树中,但是将需要过渡的标签放在里面,会避免很多不必要的麻烦
在进入/离开的过渡中,会有 6 个 class 切换。
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to
:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter
被移除),在过渡/动画完成之后移除。v-leave
:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。v-leave-to
:2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave
被删除),在过渡/动画完成之后移除。
以及官方的图解
如果你已经领悟了精髓,那么恭喜你,可以点击右上角的×或者划到下一篇文章了。
↓↓↓但你还是云里雾里的,祝贺你,你可以继续阅读下面 的内容来理解上图的具体含义↓↓↓
2.动画
css中的动画是animation和@keyframes搭配起来使用,在VUE中也是必须写这两个,但是不同的是VUE中的类名会有规定,并且VUE会在合适的时机调用合适的动画效果
bibi is nothing , see GIF
上代码(请注意看代码中的注释来理解动画的含义):
其中给transition加上了name属性,是为了区别多个动画样式;如果transition没有name属性,默认类名就是.v
通过moveBox的true / false来供VUE判断是否展示div
<button @click="moveBox = !moveBox">showBox</button>
<transition name="move">
<div class="moveBox" v-show="moveBox">这里是小M,现在是动画</div>
</transition>
export default {
name: "School",
data() {
return {
moveBox: true,
};
},
};
<style scoped>
/* 进场动画 .transition的name-enter(进入)-active */
.move-enter-active {
animation: move 1s linear;
}
/* 出场动画 .transition的name-leave(离开)-active*/
.move-leave-active {
animation: move 1s reverse;
}
@keyframes move {
from {
/*通过位移,让box消失在最左边 */
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.moveBox {
width: 200px;
height: 50px;
background-color: antiquewhite;
padding: 10px;
}
</style>
3.过渡
GIF:
代码:
如果不结合.v-enter-active和.v-leave-active,就必须给标签加上transition样式
通过moveBox2的true / false来供VUE判断是否展示div
<button @click="moveBox2 = !moveBox2">showBox</button>
<transition name="move2">
<div class="moveBox" v-show="moveBox2" style="transition: 1s linear">
这里是小M,现在是过渡
</div>
</transition>
export default {
name: "School",
data() {
return {
moveBox2: true,
};
},
};
<style scoped>
/* 进入的起点和离开的终点 样式相同 */
.move2-enter,
.move2-leave-to {
transform: translateX(-100%);
}
/* 离开的起点和进入的终点 样式相同 */
.move2-enter-to,
.move2-leave {
transform: translateX(0);
}
.moveBox {
width: 200px;
height: 50px;
background-color: antiquewhite;
padding: 10px;
}
</style>
我浅浅的画了一张图,供大家理解上面4个类名:
4.animate.css 第三方库
通过npm安装,npm install animate.css
通过yarn安装,yarn add animate.css
安装完成后导入即可,import ‘animate.css’
右侧是它的类名,可以直接copy
使用的时候需要在transition标签中添加这三个属性:
name="animate__animated animate__bounce"
enter-active-class="animate__rubberBand"
leave-active-class="animate__swing"
顾名思义,
- 第一个是固定的name
- 第二个进场动画类名
- 第三个出场动画类名
类名直接选好想要的,复制就完事儿~
GIF:
代码:
<button @click="animateBox = !animateBox">showBox</button>
<transition
name="animate__animated animate__bounce"
enter-active-class="animate__rubberBand"
leave-active-class="animate__swing"
>
<div class="moveBox" v-show="animateBox">
这里是小M,现在是Animate.css
</div>
</transition>
import "animate.css";
export default {
name: "School",
data() {
return {
animateBox: true,
};
},
};
<style scoped>
.moveBox {
width: 200px;
height: 50px;
background-color: antiquewhite;
padding: 10px;
}
</style>
今天的分享的就到这里啦
如果想要完整代码的可以评论区或者私信踢我