vue中实现动画效果--三种方式

2024年3月29日 102次阅读 来源: NI_chunz

一、普通动画实现
效果
用一个按钮, 控制一个 div 的淡入和淡出
步骤
使用 js 控制 div 的 class name

点击

function anime() { 
    var boxDom = document.querySelector('#box');
    if (boxDom.className == "show") { 
        boxDom.className = "hide"
    } else { 
        boxDom.className = "show";
    }
}

2.使用 css 控制显示

.show {
opacity: 1;
}
.hide {
opacity: 0;
}
3.使用 css 定义动画

transition: all 1s;
二、Vue 默认css类名实现简单动画效果
实现原理
vue 提供了一个 transition 组件, 可以用来包裹想要添加动画的 dom, 可以带有 name 属性作为动画名

内容 被包裹的 dom 在 v-if / v-show 等显示和隐藏的时候, vue 会在恰当的时机添加/删除 CSS 类名。 挑选合适的类名, 编写 css 动画即可 vue 自动切换的类名 组件隐藏变为显示, 称为 enter, 会按顺序切换以下 class [动画名]-enter 是在变化开始, 出现之前 [动画名]-enter-active 正在变化 正在出现 [动画名]-enter-to 变化结束已经出现结束 组件显示变为隐藏, 称为 leave, 会按顺序切换以下 class [动画名]-leave 是在消失之前 [动画名]-leave-active 正在消失 [动画名]-leave-to 消失结束 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200612200903180.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05JX2NodW56,size_16,color_FFFFFF,t_70) **三、自定义类名调用第三方动画库** 1、使用第三方动画库 animate.css [animate.css](https://daneden.github.io/animate.css/) 方法: 给 transition 标签添加属性, 替换掉默认动画的 css 类名, 属性包括: enter-class进入开始 enter-active-class进入正在进行 enter-to-class进入结束 leave-class 离开开始 leave-active-class 离开动画正在进行 leave-to-class 离开动画结束 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200612200928613.png) 动画过程中的钩子函数 方法:直接在 transition 标签中, 使用 v-on 绑定相应事件即可, 可用的事件包括: enter 部分: before-enter 组件进入前 enter 组件进入中 after-enter 组件进入后 enter-cancelled 组件进入动画被取消 (动画时间过长,未结束的时候, v-if 显示状态就被改变, 触发取消动画钩子函数) leave 部分 before-leave 组件离开前 leave 组件离开中 after-leave 组件离开后 leave-cancelled 组件离开动画被取消 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200612201103118.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05JX2NodW56,size_16,color_FFFFFF,t_70)

    原文作者：NI_chunz
    原文地址: https://blog.csdn.net/NI_chunz/article/details/106722813
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞