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  滚出
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝阳39

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值