【vue教程】七. Vue 的动画和过渡

文章目录

    • 往期列表
    • 回顾
    • 本章涵盖知识点
    • Vue 的内置动画系统
      • 基本的进入和离开过渡
      • 列表过渡
    • CSS 过渡
      • CSS 过渡基础
      • Vue 中的 CSS 过渡
    • JavaScript 动画
      • 使用 JavaScript 钩子
    • 第三方动画库的使用
      • 集成 Animate.css
    • 实例演示
      • 创建一个简单的动画应用
    • 结语

往期列表

  • 【vue教程】一. 环境搭建与代码规范配置
  • 【vue教程】二. Vue特性原理详解
  • 【vue教程】三. 组件复用和通信(7 种方式)
  • 【vue教程】四. Vue 计算属性和侦听器
  • 【vue教程】五. Vue 的路由管理
  • 【vue教程】六. Vue 的状态管理

回顾

在上一站,我们深入了解了 Vuex,学习了如何通过集中式存储来管理应用状态,并通过模块化和持久化技术来组织和维护状态。

在这里插入图片描述

正文开始如果觉得文章对您有帮助,请帮我三连+订阅,谢谢💖💖💖


本章涵盖知识点

  • Vue 的内置动画系统
  • CSS 过渡和 JavaScript 动画
  • 第三方动画库的使用

Vue 的内置动画系统

Vue 提供了一个强大的内置动画系统,它易于使用并且可以与第三方动画库如 Animate.css 无缝集成。

transition.png

基本的进入和离开过渡

Vue 通过<transition>元素包裹任何需要动画的元素,实现进入和离开的过渡效果。

<transition><div v-if="show">hello</div>
</transition>

使用 CSS 类来定义过渡的状态:

.v-enter-active,
.v-leave-active {transition: opacity 0.5s;
}
  • v-enter-from:进入动画的起始状态。在元素插入之前添加,在元素插入完成后的下一帧移除。

  • v-enter-active:进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加,在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。

  • v-enter-to:进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时),在过渡或动画完成之后移除。

  • v-leave-from:离开动画的起始状态。在离开过渡效果被触发时立即添加,在一帧后被移除。

  • v-leave-active:离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加,在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。

  • v-leave-to:离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时),在过渡或动画完成之后移除。

  • v-enter-activev-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力,我们将在下面的小节中看到一个示例。

列表过渡

Vue 为列表提供了特殊的过渡效果,可以在列表项添加和删除时应用动画。

<transition-group name="jty"><div v-for="item in items" :key="item.id">{{ item.text }}</div>
</transition-group>

并为列表项定义 CSS 过渡:

.jty-enter-from {transition: transform 0.8s;
}

CSS 过渡

CSS 过渡是实现平滑动画的一种简单方式,Vue 的过渡系统可以很好地与之集成。

CSS 过渡基础

通过改变元素的状态来触发 CSS 过渡效果:

div {transition: background-color 0.3s;
}
div:hover {background-color: #f00;
}

Vue 中的 CSS 过渡

结合 Vue 的响应式数据和方法,动态地添加/删除 CSS 类来触发过渡。

<div :class="{ active: isActive }">Content</div>

JavaScript 动画

对于更复杂的动画,Vue 允许你使用 JavaScript 直接操作 DOM,实现自定义动画效果。

使用 JavaScript 钩子

Vue 提供了几个 JavaScript 钩子,如beforeEnterenterafterEnter等,让你可以在动画的不同阶段执行 JavaScript 代码。

<Transition @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter"><!-- ... -->
</Transition>
new Vue({methods: {beforeEnter(el) {// 动画开始前},enter(el, done) {// 动画过程中done() // 通知Vue动画已完成},},
})

第三方动画库的使用

Vue 可以与许多第三方 CSS 动画库和 JavaScript 动画库配合使用,如 Animate.css、Velocity.js 等。

集成 Animate.css

集成第三方动画库通常只需要在 Vue 组件中引入相应的 CSS 文件,并使用它们的类名。

<link rel="stylesheet" href="animate.css" />

然后在 Vue 组件中使用:

<div class="animated bounceIn">Hello</div>

实例演示

创建一个简单的动画应用

我们将创建一个简单的应用,展示 Vue 内置动画系统、CSS 过渡和 JavaScript 动画的结合使用。

  1. 定义 Vue 组件

    <!-- App.vue -->
    <template><div><button @click="toggleAnimation">Toggle Animation</button><transition name="fade"><div v-if="show" class="animated bounceIn">Content</div></transition></div>
    </template><script>export default {data() {return {show: true,}},methods: {toggleAnimation() {this.show = !this.show},},}
    </script>
    
  2. 添加 CSS 样式

    .fade-enter-active,
    .fade-leave-active {transition: opacity 1s;
    }
    
  3. 使用 JavaScript 钩子

    new Vue({// ...beforeEnter(el) {el.style.opacity = 0},enter(el, done) {el.offsetWidth // 触发重排Vue.nextTick(() => {el.style.opacity = 1})},afterEnter(el) {// 清理工作},// ...
    })
    

结语

在本节的 Vue 探索之旅中,我们学习了 Vue 的动画和过渡,包括 Vue 的内置动画系统、CSS 过渡和 JavaScript 动画。通过实例演示,我们看到了如何将这些技术结合起来,为应用添加吸引人的动画效果。

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

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

相关文章

RabbitMQ如何保证消息不丢失

RabbitMQ消息丢失的三种情况 第一种&#xff1a;生产者弄丢了数据。生产者将数据发送到 RabbitMQ 的时候&#xff0c;可能数据就在半路给搞丢了&#xff0c;因为网络问题啥的&#xff0c;都有可能。 第二种&#xff1a;RabbitMQ 弄丢了数据。MQ还没有持久化自己挂了。 第三种…

《深入浅出WPF》读书笔记.4名称空间详解

《深入浅出WPF》读书笔记.4名称空间详解 背景 主要讲明名称空间概念&#xff0c;可以理解为命名空间的引用。 xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml" &#x1f446;如x可以理解为一些列命名空间的引用。 不一一列举&#xff0c;只讲几个特殊的…

Java基础——注释

在开发中注释是必不可少的&#xff0c;帮助我们更好的标记阅读代码&#xff0c;下面介绍几种常用的注释方式。 一、注释种类 1. 单行注释 使用//一行代码来进行注释&#xff0c;只能注释一行内容 2. 多行注释 使用斜杠星号的方式 /*注释多行代码*/&#xff0c;注释多行代…

2024最新急速暴走小米运动自动刷步卡密版PHP源码

2023最新发布的急速暴走小米运动自动刷步卡密版PHP源码。该源码使用PHPTP6layui-Mini开发&#xff0c;旨在实现小米运动自动刷步功能。该程序支持通过微信修改步数&#xff0c;并采用卡密认证方式&#xff0c;用户只需提交提供的卡密&#xff0c;即可每日自助修改步数。 需要注…

UDP网络攻击

UDP&#xff08;User Datagram Protocol&#xff09;作为一种无连接的网络传输协议&#xff0c;以其速度快和资源消耗小的特点&#xff0c;在多种网络服务中发挥着重要作用&#xff0c;UDP的无连接特性也使其成为DDoS攻击的优选协议。 UDP攻击概念 UDP攻击是一种网络攻击手段…

USB HiFi 声卡

USB HiFi声卡就像是你电脑上的一对超级耳朵&#xff0c;它能将你从普通音质中拯救出来&#xff0c;带你进入一个音乐细节丰富的世界。无论你是音乐迷、游戏玩家还是电影发烧友&#xff0c;这些声卡都是你的音频升级好帮手。设计师在设计USB HiFi声卡的过程&#xff0c;就像是调…

Linux虚拟机磁盘管理-添加磁盘

添加磁盘--添加前请选关闭虚拟机 添加步骤&#xff1a; 1.编辑虚拟机设置 2.选择硬盘 3.选择SCSI 4.创建新虚拟磁盘 5.设置磁盘大小 6.点击完成 开机的时候会去读取有几块硬盘&#xff0c;总共我们是有4块硬盘&#xff0c;sda\sdb\sdc\sdd 注意&#xff1a;新加的硬盘实际我们…

华为OD机试(C卷,100分)- 游戏分组

题目描述 部门准备举办一场王者荣耀表演赛,有 10 名游戏爱好者参与,分为两队,每队 5 人。 每位参与者都有一个评分,代表着他的游戏水平。为了表演赛尽可能精彩,我们需要把 10 名参赛者分为示例尽量相近的两队。 一队的实力可以表示为这一队 5 名队员的评分总和。 现在给你…

鸿萌数据恢复服务:SQL Server 中的“PFS 可用空间信息不正确”错误

天津鸿萌科贸发展有限公司从事数据安全服务二十余年&#xff0c;致力于为各领域客户提供专业的数据恢复、数据备份、网络及终端数据安全等解决方案与服务。 同时&#xff0c;鸿萌是国际主流数据恢复软件(Stellar、UFS、R-Studio、ReclaiMe Pro 等)的授权代理商&#xff0c;为专…

爬虫案例3——爬取彩票双色球数据

简介&#xff1a;个人学习分享&#xff0c;如有错误&#xff0c;欢迎批评指正 任务&#xff1a;从500彩票网中爬取双色球数据 目标网页地址&#xff1a;https://datachart.500.com/ssq/ 一、思路和过程 目标网页具体内容如下&#xff1a; ​​​​​ 我们的任务是将上图中…

使用AWS Lambda轻松开启Amazon Rekognition之旅

这是本系列文章的第一篇&#xff0c;旨在通过动手实践&#xff0c;帮助大家学习亚马逊云科技的生成式AI相关技能。通过这些文章&#xff0c;大家将掌握如何利用亚马逊云科技的各类服务来应用AI技术。 那么让我们开始今天的内容吧&#xff01; 介绍 什么是Amazon Rekognition&…

前端宝典之五:React源码解析之深度剖析Diff算法

本文主要针对React源码进行解析&#xff0c;内容有&#xff1a; 1、Diff算法原理、两次遍历 2、Diff瓶颈及限制 3、Diff更新之单节点和多节点原理 一、Diff源码解析 以下是关于 React Diff 算法的详细解析及实例&#xff1a; 1、React Diff 算法的基本概念和重要性 1.1 概念…

【LeetCode每日一题】——301.删除无效的括号

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 广度优先搜索 二【题目难度】 困难 三【题目编号】 301.删除无效的括号 四【题目描述】 给…

ROS 2中,CMakeList.txt常见语法

在ROS 2中&#xff0c;CMakeList.txt 文件扮演着配置和管理构建过程的重要角色。这个文件遵循CMake的语法&#xff0c;用于定义如何编译和链接源代码。下面是一些在ROS 2项目CMakeList.txt文件中常见的语法和用法。 1. 基本结构和命令 cmake_minimum_required(VERSION )&…

【设计模式】装饰器模式和适配模式

装饰器模式 装饰器模式能够很好的对已有功能进行拓展&#xff0c;这样不会更改原有的代码&#xff0c;对其他的业务产生影响&#xff0c;这方便我们在较少的改动下对软件功能进行拓展。 类似于 router 的前置守卫和后置守卫。 Function.prototype.before function (beforeFn)…

【C++】————智能指针

作者主页&#xff1a; 作者主页 本篇博客专栏&#xff1a;C 创作时间 &#xff1a;2024年8月20日 一&#xff0c;什么是智能指针 在C中没有垃圾回收机制&#xff0c;必须自己释放分配的内存&#xff0c;否则就会造成内存泄露。解决这个问题最有效的方法是使用智能指针&…

异常信息转储预研笔记-堆栈地址转换

addr2line命令 addr2line -e <exec> <addr> -f | xargs cfilt<exec>: 进程名 <addr>&#xff1a;堆栈地址eg&#xff1a; addr2line -e backtrace 0x4009d2 -f | xargs cfilt此方案测试了&#xff0c;不知道什么原因只显示?? ??:0 &#xff0c;而…

Java面试题--分布式锁

分布式锁 你说一下什么是分布式锁 分布式锁是在分布式/集群环境中解决多线程并发造成的一系列数据安全问题.所用到的锁就是分布式锁&#xff0c;这种锁需要被多个应用共享才可以&#xff0c;通常使用Redis和zookeeper来实现。 分布式锁有哪些解决方案 常用的三种方案 基于…

Spring模块详解Ⅱ

目录 Spring Beans模块详解1. 什么是 Bean?2. Spring Bean的配置方式2.1 基于 XML 配置例子&#xff1a; 2.2 基于注解配置例子&#xff1a; 2.3 基于 Java 配置&#xff08;JavaConfig&#xff09;例子&#xff1a; 3. Bean 的生命周期生命周期回调的例子&#xff1a; 4. Bea…

Oracle+ASM+High冗余详解及空间计算

Oracle ASM&#xff08;Automatic Storage Management&#xff09;的High冗余模式是一种提供高度数据保护的策略&#xff0c;它通过创建多个数据副本来确保数据的可用性和安全性。 以下是关于Oracle ASM High冗余的详细解释&#xff1a; 一、High冗余的特点 1.数据冗余度 在Hi…