上篇文章我们说到了在过渡效果中CSS样式的类名是可以自定义的，官方提供了6个可以自定义的特性，这6个特性分别是：
enter-classenter-active-classenter-to-class</code> (2.1.8+)leave-classleave-active-classleave-to-class</code> (2.1.8+)
具体用法：
- <transition
- name="fade"
- enter-active-class="active"
- leave-active-class="leave"
- enter-class="start"
- leave-to-class="end"
- >
- .active, .leave {
- transition: opacity .5s;
- }
- .start, .end {
- opacity: 0;
- }
这样一来就可以用我们自定义的类名来实现之前一样的效果。
使用animate.css
使用之前我们先写一下动画样式：
- /**
- *使用@keyframes规则，可以创建动画，bounce-in为动画名字
- *transform这个属性可以实现元素旋转，缩放，移动，倾斜等。
- *transform属性中scale值可以定义缩放转换
- *0％是开头动画，100％是当动画完成。
- *animation指定要绑定的动画名字，2s表示指定动画播放完成花费的时间
- *transform-Origin属性表示允许更改转换元素的位置。
- */
- @keyframes bounce-in {
- 0% {
- transform: scale(0);
- }
- 50% {
- transform: scale(2);
- }
- 100% {
- transform: scale(0);
- }
- }
- .fade-enter-active {
- transform-Origin: left center;
- animation: bounce-in 2s;
- }
- .fade-leave-active {
- transform-Origin: left center;
- animation: bounce-in 2s;
- }
为什么用.fade-enter-active和.fade-leave-active这两个类名，是因为他们在动画整个过程都存在。
接下来就说到我们的主角animate.css流行库了，库里面有很多好玩的效果，这样我们就不用重复造轮子了，重复造轮子我们是不提倡的，那么要怎么使用呢？
首先
- <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
然后
- <transition
- name="fade"
- enter-active-class="animated swing"
- leave-active-class="animated shake"
- >
注意
使用animate.css库时
- 必须使用自定义类名的形式
- 必须包含animated类，animated后是具体的效果名字
微信小程序
互联网开发，终身学习者，欢迎您的关注！
