Vue动画——使用最新版Animate.css教程

目录

1. 安装Animate.css

2. 配置 Animate.css

3. 在指定元素上使用

4. 在过渡动画中使用

5. 经典范例 —— 页面向下滚动到指定位置时，顶部显示悬浮搜索框

6. animate.css动画效果的类名

弹跳

渐变

翻转

急速

旋转

缩放

滑动

回退

其他

---

1. 安装Animate.css

npm install animate.css --save

2. 配置 Animate.css

全局引入：写在main.js中

局部引入：写在要使用的 .vue文件中

// 动画 animate.css
import animate from "animate.css";

3. 在指定元素上使用

在需要添加动画的元素上，添加上对应的动画 class 类名即可

<div class="animate__animated animate__zoomIn animate__delay-2s animate__slower animate__repeat-2">2秒后缓慢放大进入（播放2次）</div>

• animate__animated 指定使用animate.css中的动画效果
• animate__zoomIn    指定使用animate.css中的放大进入动画效果
• animate__delay-2s  设置动画延迟播放时间，此处为2s，还可设置为1s，2s，3s，4s，5s
• animate__slower      设置动画的速度，此处为最慢的slower，还可以设置为slower，slow，fast，faster
• animate__repeat-2   设置动画播放次数，此处为2次，还可以设置为 1, 2, 3 。若想无限循环播放，使用 animate__infinite

4. 在过渡动画中使用

<template>
    <div>
        <button @click="changeShow">切换动画效果</button>
        <transition
                enter-active-class="animate__animated animate__zoomIn"
                leave-active-class="animate__animated animate__zoomOut"
        >
            <div v-show="show">当自定义变量show为true时显示（从最小不断变大到原始大小），为false时不断变小直到隐藏</div>
        </transition>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                show: false
            }
        },
        methods: {
            changeShow() {
                this.show = !this.show
            }
        }
    }
</script>

1. 使用 <transition></transition>标签包裹需要添加过渡动画的元素
2. 在 enter-active-class 中指定元素显示的动画效果
3. 在 leave-active-class 中指定元素隐藏的动画效果
4. 在元素上添加v-show或v-if指定来绑定自定义的控制显示隐藏的变量
5. 在指定事件中，通过改变变量的值，来控制指定元素的显隐，当元素显隐状态发生改变时，便能看到过渡动画

5. 经典范例 —— 页面向下滚动到指定位置时，顶部显示悬浮搜索框

详见  https://blog.csdn.net/weixin_41192489/article/details/111086090

6. animate.css动画效果的类名

效果详见官网 https://animate.style/

常用类名如下：

弹跳

 

• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceInUp
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp

渐变

 

• fadeIn
• fadeInDown
• fadeInDownBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• fadeInUp
• fadeInUpBig
• animate__fadeInTopLeft
• animate__fadeInTopRight
• animate__fadeInBottomLeft
• animate__fadeInBottomRight
• fadeOut
• fadeOutDown
• fadeOutDownBig
• fadeOutLeft
• fadeOutLeftBig
• fadeOutRight
• fadeOutRightBig
• fadeOutUp
• fadeOutUpBig
• animate__fadeOutTopLeft
• animate__fadeOutTopRight
• animate__fadeOutBottomRight
• animate__fadeOutBottomLeft

翻转

• animate__flip
• flipInX
• flipInY
• flipOutX
• flipOutY

急速

• lightSpeedInRight
• lightSpeedInLeft
• lightSpeedOutRight
• lightSpeedOutLeft

旋转

• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight
• rotateOut
• rotateOutDownLeft
• rotateOutDownRight
• rotateOutUpLeft
• rotateOutUpRight

缩放

 

• zoomIn
• zoomInDown
• zoomInLeft
• zoomInRight
• zoomInUp
• zoomOut
• zoomOutDown
• zoomOutLeft
• zoomOutRight
• zoomOutUp

滑动

 

• slideInDown
• slideInLeft
• slideInRight
• slideInUp
• slideOutDown
• slideOutLeft
• slideOutRight
• slideOutUp

回退

• animate__backInDown
• animate__backInLeft
• animate__backInRight
• animate__backInUp
• animate__backOutDown
• animate__backOutLeft
• animate__backOutRight
• animate__backOutUp

其他

• bounce  弹跳
• flash 闪现
• pulse  放大后缩小
• rubberBand 左右拉扯变扁后回弹
• animate__shakeX  左右震动
• animate__shakeY  上下震动
• headShake 向左震动后弹回震动
• swing  跷跷板
• tada   扭转后回弹
• wobble  左摆后回弹
• jello  变成平行四边形后回弹
• hinge 一边掉落悬挂
• rollIn 滚入
• rollOut  滚出