使用Vue实现CSS过渡和动画

01-初识动画和过渡

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>使用vue实现css过渡和动画</title></head><body><script src="https://unpkg.com/vue"></script><div id="root"></div><script>const app = Vue.createApp({template: `<div>hello world</div>`,});const vm = app.mount('#root')</script></body>
</html>

过渡和动画的区别:
在这里插入图片描述
在这里插入图片描述

动画:

<style>@keyframes move {0% {transform: translateX(100px);}50% {transform: translateX(50px);}100% {transform: translateX(0);}}.animation {animation: move 2s;}
</style>const app = Vue.createApp({template: `<div class="animation">hello world</div>`,
});
const vm = app.mount('#root')

效果:在这里插入图片描述
通过点击触发:

<script>const app = Vue.createApp({data() {return {animate: {animation: false}}},methods: {handleClick() {this.animate.animation = !this.animate.animation}},template: `<div :class="animate">hello world</div><button @click="handleClick">按钮</button>`,});const vm = app.mount('#root')
</script>

在这里插入图片描述

过渡

<style>
.pink {background-color: pink;
}
.green {background-color: green;
}
.transition {transition: 2s ease;
}
</style>
const app = Vue.createApp({data() {return {animate: {transition: true,green: true,pink: false}}},methods: {handleClick() {this.animate.green = !this.animate.greenthis.animate.pink = !this.animate.pink}},template: `<div :class="animate">hello world</div><button @click="handleClick">按钮</button>`,
});
const vm = app.mount('#root')

效果:
在这里插入图片描述

02-单元素/组件的入场和出场动画

过渡

基本使用:
入场过渡:

<style>/* 进入,开始 */.v-enter-from {opacity: 0;}/* 开始,结束规定动画的效果,这个必须要有,否则不生效 */.v-enter-active {transition: opacity 2s ease;}/* 出去,结束 */.v-enter-to {opacity: 1;}
</style>
const app = Vue.createApp({data() {return {show: false}},methods: {handleClick() {this.show = !this.show}},template: `<transition><div v-if="show">hello world</div></transition><button @click="handleClick">按钮</button>`,
});
const vm = app.mount('#root')

入场过渡效果:
在这里插入图片描述
出场过渡:

<style>
/* 出场的开始 */
.v-leave-from {opacity: 1;
}
.v-leave-active {transition: opacity 2s ease;
}
/* 出场的结束 */
.v-leave-to {opacity: 0;
}
</style>

出场过渡效果:
在这里插入图片描述

动画

<style>
@keyframes move {0% {transform: translateX(-100px);}50% {transform: translateX(-50px);}75% {transform: translateX(50px);}100% {transform: translateX(0);}
}
// 只需要 v-enter-active v-leave-active 即可
.v-enter-active {animation: move 2s ease-in;
}
.v-leave-active {animation: move 2s ease-in;
}
</style>

在这里插入图片描述
可以使用别名:

<style>
.yunmu-enter-active,
.yunmu-leave-active {animation: move 2s ease-in;
}
</style>
template: `
<transition name="yunmu"><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

也可以使用enter-active-class leave-active-class起别名

<style>
.hello,
.bye {animation: move 2s ease-in;
}
</style>
template: `
<transition name="yunmu"enter-active-class="hello"leave-active-class="bye"
><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>

起别名的好处,引入第三方组件库,直接添加name属性就可以完成对应的动画,比如第三方的animate.css
引入第三方动画库:

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

js中直接使用animate__animated animate__bounce

template: `
<transition name="yunmu"enter-active-class="animate__animated animate__bounce"leave-active-class="animate__animated animate__bounce"
><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

在这里插入图片描述
下面再来看这种场景:

<style>
@keyframes move {0% {transform: translateX(100px);}50% {transform: translateX(50px);}100% {transform: translateX(0);}
}
.v-enter-from {color: red;
}.v-enter-active,
.v-leave-active {animation: move 10s ease-in;transition: all 3s ease;
}
.v-leave-active {color: red;
}
</style>
template: `
<transition><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

动画10s,过渡3s;
在这里插入图片描述
可以看到,由于动画的时间比较长,所以过渡完了之后,动画依旧还在进行,如果我们想要达到两者相同的时间的效果的话,就需要制定一个标准:比如以时间短的为结束。可以使用下面的方法:

template: `
<transition type="transition"><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

transition增加一个type,表示时间以哪个为准。
在这里插入图片描述
也可以使用duration属性,表示过渡和动画的时间

也可以使用js进行控制
// 动画进入之前
handleBeforeEnter(el) {el.style.color = 'red'
},
// 执行过程中
handleEnterActive(el, done) {const timer = setInterval(() => {const color = el.style.color;if(color === 'red') {el.style.color = 'green'} else {el.style.color = 'red'}}, 1000);setTimeout(() => {clearInterval(timer)done()}, 4000);
},
// 动画结束之后的钩子 只有 handleEnterActive 中的done执行完之后,该钩子才会执行
handleAfterEnter() {alert(22222)
}template: `
<transition :css="false"@before-enter="handleBeforeEnter"@enter="handleEnterActive"@after-enter="handleAfterEnter"
><div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`,

在这里插入图片描述
另外离开的时候,也有对应的钩子before-leave leave after-leave

03-组件和元素切换动画的实现

<style>
.v-enter-from {opacity: 0;
}
.v-enter-active,
.v-leave-active {transition: opacity 1s;
}
.v-enter-to,
.v-leave-from{opacity: 1;
}
.v-leave-to {opacity: 0;
}
</style>
template: `
<transition 
><div v-if="show">hello world</div><div v-else>Bye world</div>
</transition>
<button @click="handleClick">按钮</button>
`,

在这里插入图片描述
有个问题:两个标签都是慢慢消失,慢慢出来,不是我们想要的效果
transition标签上面增加mode="out-in"属性,表示先出场,再进场。
在这里插入图片描述
对比一下in-out
在这里插入图片描述
这样动画就不是一个同步的了。上面的if else标签也可以改成组件。
另外列表组件可以使用transition-group标签进行动画渲染,和transition标签使用差不多。
vue.js的过渡和动画 (更新完成)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/789466.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MMU关闭时Cache的缓存策略是怎样的

快速链接: 【精选】ARMv8/ARMv9架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448; 在学习MMU章节时&#xff0c;我们发现在页表的entry中&#xff0c;BIT[4:2]指向了MAIR寄存器&#xff0c;该寄存器描述了内存属性&#xff0c;其实就是cache的缓存策略属性&#…

一些常见的k8s问题和答案

什么是 Kubernetes&#xff08;K8s&#xff09;&#xff1f; Kubernetes是一个开源的容器编排平台&#xff0c;用于自动化部署、扩展和管理容器化应用程序。由多个组件组成&#xff0c;每个组件都有不同的作用和功能。以下是Kubernetes的主要组件及其作用&#xff1a; kube-ap…

ABAP 去除小数掉

有时我们需要将数字类型转换成字符型&#xff0c;但后面存在小数点为零的&#xff0c;以下方法可去掉。 DATA:QTY TYPE P DECIMALS 2,ZQTY TYPE C LENGTH 20,Q1 TYPE STRING, Q2 TYPE STRING,TAB_C TYPE C LENGTH 20. QTY 2. IF QTY <> 0. ZQTY QTY. CONDENSE ZQ…

高性价比的挂耳式耳机哪个好用?五大高口碑品牌深度测评严选!

入耳式耳机虽然普及度极高&#xff0c;但其缺点也不容忽视。首先&#xff0c;长时间佩戴可能导致耳朵不适&#xff0c;甚至影响听力健康。其次&#xff0c;入耳式耳机往往因为隔音效果过好&#xff0c;导致用户与周围环境脱节&#xff0c;失去了一定的生活便利性。相比之下&…

《书生·浦语大模型全链路开源开放体系》学习笔记

书生浦语大模型全链路开源开放体系-学习笔记 大模型成为发展通用人工智能的重要途径专用模型通用大模型 书生大模型开源历程InternLM2回归语言建模的本质主要亮点性能全方位提升强大的内生计算能力 从模型到应用典型流程全链条开源开放体系数据数据集获取预训练微调XTuner 评测…

Runes 生态一周要览 ▣ 2024.3.25-3.31|Runes 协议更新 BTC 减半在即

Runes 生态大事摘要 1、Casey 发布了 Runes 协议文档 RUNES HAVE DOCS&#xff0c;Github 代码库更新到 ord 0.17.0 版本&#xff0c;Casey 表示符文是一个“严肃”的代币协议。 2、Casey 公布了第一个硬编码的创世符文「UNCOMMONGOODS」 3、4月7日香港沙龙&#xff5c;聚焦「…

c++的学习之路:9、STL简介与string(1)

一、STL 1、什么是STL STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 也就是说STL就是一个模板&#xff0c;这个模板就是整合了很多库让我们方…

Git常用语句

设置用户名 git config --global user.name "用户名" git config --global user.email "邮箱"查看git用户信息 cat ~/.gitconfig初始化本地库 git initclone指定分支的代码 git clone -b my_branch gitgitlabxxxxxxxxxxxxxxxxxxxxxx.gitpush三件套 gi…

P2249:查找——P1024:一元三次方程求解 【二分查找】

P2249 【深基13.例1】查找 【二分查找】题目描述 输入 n 个不超过 10^9 的单调不减的(就是后面的数字不小于前面的数字)非负整数 a1,a2,…,an ,然后进行 m 次询问。对于每次询问,给出一个整数 q,要求输出这个数字在序列中第一次出现的编号,如果没有找到的话输出 −1 。输…

Redis热点Key问题分析与解决

目录 一、问题现象描述 二、什么是热点Key 三、热点Key的危害 3.1 Redis节点负载过高 3.2 Redis集群负载不均 3.3 Redis集群性能下降 3.4 数据不一致 3.5 缓存击穿 四、热点Key产生的原因分析 4.1 热点数据 4.2 业务高峰期 4.3 代码逻辑问题 五、如何检测热点Key …

ClickHouse开发相关(UDAF)

ClickHouse开发相关(UDAF) ClickHouse介绍 ClickHouse是一个开源、高性能的列式 OLAP 数据库管理系统,用于使用 SQL 进行实时分析。 为什么需要ClickHouse UDAF? ClickHouse中已存在了许多聚合函数,绝大多数情况下已经覆盖我们的需求,但是有时候我们仍然需要自定义函数…

红队笔记11:pWnOS1.0打靶流程解法2-ssh免密登录-rsa私钥破解-shellshock提权(vulnhub)

目录 开头 1.webmin文件泄露漏洞利用-/etc/passwd/ 2.ssh免密登录-私钥伪随机数碰撞&#xff1a; ssh免密登录原理&#xff1a; prng伪随机数生成ssh rsa 私钥公钥密码库 openssl和openssh的关系&#xff1a; ssh登录报错-解决思路-vv 3.提权-内核提权-shellshock提权 内…

《解释器模式(极简c++)》

本文章属于专栏- 概述 - 《设计模式&#xff08;极简c版&#xff09;》-CSDN博客 模式说明 方案&#xff1a; 对每个data建立一个单点解释器对象X&#xff0c;dataA和dataB之间的关系&#xff0c;建立一个关系解释器对象Y&#xff0c;这里的Y处理的是X1和X2。这样&#xff0c;…

心灵鸡汤人生感悟,简短而有深意的句子

1、你的真心很珍贵&#xff0c;别再不值得的人身上卑微 &#xff0c;爱应该是让你笑的开怀&#xff0c;而不是哭的崩溃。爱必须是温情的依赖&#xff0c;而不是冷漠的伤害。想要找你的人走遍了全世界也能找到你&#xff0c;等到了年华老去也会等着你。 2、大冬天的时候给你送吃…

MySQL安装卸载-Linux

目录 1.概述 2.安装 2.1.上传 2.2.解压 ​​​​​​​2.3.安装 ​​​​​​​2.4.启动服务 ​​​​​​​2.5.查询临时密码 ​​​​​​​2.6.修改临时密码 ​​​​​​​2.7.创建用户 ​​​​​​​2.8.分配权限 ​​​​​​​2.9.重新链接 3.卸载 3.1.停…

LeetCode-2810. 故障键盘【字符串 模拟】

LeetCode-2810. 故障键盘【字符串 模拟】 题目描述&#xff1a;解题思路一&#xff1a;Python切片操作yyds!解题思路二&#xff1a;不用切片&#xff0c;用双端队列。解题思路三&#xff1a; 题目描述&#xff1a; 你的笔记本键盘存在故障&#xff0c;每当你在上面输入字符 ‘…

供应商管理软件:供应商绩效评估实用清单

还在为寻找潜在供应商而苦恼吗&#xff1f;难以判断与现有供应商的关系吗&#xff1f;想优化运营成本但无从下手吗&#xff1f; 如果以上回答是肯定的&#xff0c;那么强烈建议你做好供应商评估。 供应商评估的重要性 在采购中&#xff0c;供应商评估是指根据业务要求&#…

Linux 内核线程的创建:一段代码的旅程

Linux 内核线程的创建&#xff1a;一段代码的旅程 Linux 内核线程是一种没有用户空间地址的轻量级进程&#xff0c;它们在内核空间运行并执行核心系统功能。这些线程是Linux多任务处理的基础&#xff0c;负责处理设备驱动、系统调用和其他核心任务。本文将详细探讨内核线程的创…

【LeetCode热题100】79. 单词搜索(回溯)

一.题目要求 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 单词必须按照字母顺序&#xff0c;通过相邻的单元格内的字母构成&#xff0c;其中“相邻”单元格是那些水平…

VsCode正确解决vue3+Eslint+prettier+Vetur的配置冲突

手把手教你VsCode正确解决vue3EslintprettierVetur的配置冲突 VsCode正确解决vue3EslintprettierVetur的配置冲突Eslint文档查看和修改规则&#xff1a;step1&#xff1a;首先快速浏览下规则简要setp2: ctrlF 搜索你要配置规则的英文名&#xff0c;例如attributesetp3: 修改配置…