过渡与动画

单元素/组件过渡

Vue在插入、更新或者移除 DOM 时,提供多种不同方式的过渡效果(一个淡入淡出的效果)

在条件渲染(使用v-if)、条件展示(使用v-show)、动态组件、组件根节点等情形中,可以给任何元素和组件添加进入/离开过渡

Vue提供了内置的过渡封装组件<transition>,该组件用于包裹要实现过渡效果的组件

语法如下:

<transition name = "过渡名称">         

        <!--要实现过渡效果的组件-->

</transition>

class过渡 

过渡效果分为两部分:进入和离开,在进入/离开的过渡中,有6个class切换

1. v-enter-from 定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

2. v-enter-active 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间、延迟和曲线函数。

3. v-enter-to 定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时 v-venter-from 被移除),在过渡/动画完成之后移除。 

4. v-leave-from 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。 5. v-leave-active 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间、延迟和曲线函数。

6. v-leave-to 定义过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 vleave-from 被删除),在过渡/动画完成之后移除。

css过渡

常用的过渡一般都是CSS过渡

CSS过渡,顾名思义也就是使用过渡class定义CSS实现过渡效果

css动画 

CSS动画与CSS过渡用法相同

区别是在动画中v-enter类名在节点插入DOM后不会立即被删除,而是在animationend(动画结束)事件触发时删除 

同时使用过渡和动画

在一些应用场景中,需要给一个元素同时设置过渡和动画,比如 animation 很快的被触发并完成,而 transition 效果还没结束。这时,需要使用 type属性并设置 animation 或 transition值来明确声明需要Vue监听的类型。

<transition> 组件的 duration prop上可显性定义过渡持续时间(以毫秒计)

比如,定制进入和移出的持续时间:

<transition :duration="{ enter:1000, leave: 2000 }">...</transition>

还可以通过appear属性设置DOM节点在初始渲染的过渡(页面加载的初次过渡动画):<transition appear>...</transition>

JavaScript 钩子方法 

多元素/组件过渡

对于原生元素可以使用v-if/v-else实现多元素过渡。

最常见的多元素过渡是一个列表和描述这个列表为空消息的元素:

<transition>     

        <table v-if="items.length > 0">     

                <!-- ... -->     

        </table>     

        <p v-else>没有列表内容</p>

</transition>

实际上,通过使用多个v-if或将单个元素绑定到一个动态属性上,可以在任意数量的元素之间进行过渡。

可以使用多组件过渡将多个组件包装成动态组件的效果 

列表过渡

对于列表元素,可使用<transition-group>组件进行过渡。

<transition-group>组件具有以下几个特点:

1、不同于 <transition>组件,它默认以<span>元素渲染。

2、过渡模式不可用,因为不再相互切换特有的元素。

3、内部元素需要提供唯一的key属性值。

4、CSS过渡类将会应用在组件内部的元素中,而不是组件本身。

<transition-group> 组件不仅可以进入和离开列表过渡,还可以通过v-move特性改变定位,进行平滑过渡。

v-move特性像之前的类名一样,可以通过name属性来自定义前缀 

利用move属性,进行变换过渡,即一个列表中的列表项既不增加也不减少,只是不断地变换其位置 

FLIP动画不仅可以实现单列表过渡,多维网格列表的过渡也同样简单  

总结 

Vue的过渡与动画,主要用到transition组件,该组件一般搭配v-if、v-show、动态组件、组件根节点来使用。

对列表进行过渡渲染时,不能再使用transition,必须使用transition-group组件包裹。如果需要实现列表进入时的动画,可以给transition-group添加appear属性即可。

在Vue中,元素过渡的流程是:

1、将要过渡的元素放入transition组件中。可以写多个transition组件,如果没有定义名称,在写6个class时,那么v-开头的class可以控制所有的过渡,如果给了名称,那么只能控制与名称对应的过渡。

2、通过vue实现对transition中的元素进行插入或删除操作。

3、在对应的6个class中写CSS代码,实现在插入或删除完成前过渡效果。

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

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

相关文章

python算法题

需求 代码 class Solution:def searchInsert(self, nums: List[int], target: int) -> int:if max(nums) >target:for i in range(len(nums)-1):if nums[i1] > target and nums[i] <target:return i1if max(nums) <target:return len(nums)if min(nums) > …

操作系统(2)——进程线程

目录 小程一言专栏链接: [link](http://t.csdnimg.cn/8MJA9)基础概念线程详解进程详解进程间通信调度常用调度算法 重要问题哲学家进餐问题问题的描述策略 读者-写者问题问题的描述两种情况策略 总结进程线程一句话 小程一言 本操作系统专栏&#xff0c;是小程在学操作系统的过…

【tcl脚本实践Demo 1】文本生成、匹配、修改、读写

引言 在芯片设计的流程中,各种EDA工具在设计、综合、布局布线、验证、时序分析等等环节都会产出大量的文件信息。这些信息是海量的,如果单纯靠程序员自己查看信息效率很低并且很容易纰漏。所以脚本语言可以很好的解决这个问题,可以利用脚本语言匹配到敏感的信息,完成对信息…

240 基于matlab的飞行轨迹仿真程序

基于matlab的飞行轨迹仿真程序&#xff0c;多种不同的飞行轨迹&#xff0c;输出经度、纬度、高度三维轨迹&#xff0c;三个方向的飞行速度。程序已调通&#xff0c;可直接运行。 240 飞行轨迹仿真 三维轨迹 飞行速度 - 小红书 (xiaohongshu.com)

Golang图片验证码的使用

一、背景 最近在使用到Golang进行原生开发&#xff0c;注册和登录页面都涉及到图片验证码的功能。找了下第三方库的一些实现&#xff0c;发现了这个库用得还是蛮多的。并且支持很多类型的验证方式&#xff0c;例如支持数字类型、字母类型、音频验证码、中文验证码等等。 项目地…

动态规划-回文子串问题

文章目录 1. 回文子串&#xff08;647&#xff09;2. 最长回文子串&#xff08;5&#xff09;3. 分割回文串 IV&#xff08;1745&#xff09;4. 分割回文串 II&#xff08;132&#xff09;5. 最长回文子序列&#xff08;516&#xff09;6. 让字符串成为回文串的最少插入次数&am…

Vue入门篇:样式冲突scoped,data函数,组件通信,prop data单向数据流,打包发布

这里写目录标题 1.组件的样式冲突scoped2.data函数3.组件通信1.两种组件关系分类和对应的组件通信方案2.父子通信方案的核心流程 4.prop & data、单向数据流5.打包发布6.打包优化:路由懒加载 1.组件的样式冲突scoped 默认情况:写在组件中的样式会全局生效→因此很容易造成多…

【Python从入门到进阶】53、Scrapy日志信息及日志级别

接上篇《52、CrawlSpider链接提取器的使用》 上一篇我们学习了基于规则进行跟踪和自动爬取网页数据的“特殊爬虫”CrawlSpider。本篇我们来学习Scrapy的日志信息及日志级别。 一、引言 1、日志在Scrapy中的重要性 在Scrapy框架中&#xff0c;日志扮演着至关重要的角色。日志…

十三、大模型项目部署与交付

1 硬件选型 CUDA 核心和 Tensor 核心 CUDA 核心&#xff1a;是NVIDIA开发的并行计算平台和编程模型&#xff0c;用于GPU上的能用计算&#xff0c;可做很多的工作。应用在游戏、图形渲染、天气预测和电影特效Tensor 核心&#xff1a;张量核心&#xff0c;专门设计用于深度学习…

前端开发框架Vue

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Vue概述 Vue.js&#xff08;简称Vue&#xff09;是由尤雨溪&#xff08;Evan You&#xff09;创建并维护的一款开源前端开发框架。Vue以其轻量级、易上手和高度灵活的特点&…

IoTDB 入门教程③——基于Linux系统快速安装启动和上手

文章目录 一、前文二、下载三、解压四、上传五、启动六、执行七、停止八、参考 一、前文 IoTDB入门教程——导读 二、下载 下载二进制可运行程序&#xff1a;https://dlcdn.apache.org/iotdb/1.3.1/apache-iotdb-1.3.1-all-bin.zip 历史版本下载&#xff1a;https://archive.…

C——双向链表

一.链表的概念及结构 链表是一种物理存储单元上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。什么意思呢&#xff1f;意思就是链表在物理结构上不一定是连续的&#xff0c;但在逻辑结构上一定是连续的。链表是由一个一个的节点连…

24五一杯ABC题完整思路+可执行代码+可视化图表(1)

2024五一赛A题保姆级建模思路20页1-3问可执行代码后续成品论文各类可视化图表&#xff08;完整版资料在文章最后&#xff09; 处理第一问的代码 其余各题的代码如下&#xff1a; A题保姆级建模思路20页&#xff1a;&#xff08;手把手教你如何建模&#xff09; 高清图片如下&am…

第12章 软件测试基础(第一部分)概念、质量保证、测试用例、测试执行过程

一、软件测试 &#xff08;一&#xff09;定义 动态验证计算机程序对有限的测试用例集是否可产生期望的结果的过程。测试计划是描述了要进行的测试活动的范围、方法、资源和进度的文档。编写测试计划目的&#xff1a;使测试工作顺利进行、使项目参与人员沟通更舒畅、使测试工…

面试常见 | 项目上没有亮点,如何包装?

很多技术人在公司用的老技术&#xff0c;而且很多都是搬业务代码且做枯燥乏味的CRUD&#xff0c;在面试提交简历或做自我介绍的时候并不突出&#xff0c;这种情况&#xff0c;如何破局&#xff1f; 首先不管你做的啥项目&#xff0c;全世界不可能只有你自己在做&#xff0c;比…

Tensorflow2.0笔记 - ResNet实践

本笔记记录使用ResNet18网络结构&#xff0c;进行CIFAR100数据集的训练和验证。由于参数较多&#xff0c;训练时间会比较长&#xff0c;因此只跑了10个epoch&#xff0c;准确率还没有提升上去。 import os import time import tensorflow as tf from tensorflow import keras …

附录6-5 黑马优购项目-我的与后端本地化

目录 1 我的 2 后端本地化 1 我的 tarbar我的 只有这两个页面 其中未登录页面中只有一键登录有用&#xff0c;其他都是写死的&#xff0c;一键登录的功能仅仅是切换到登录的页面 目前微信小程序和微信用户的信息是脱钩的&#xff08;之前的wx.getUserProfile与wx.getUs…

企业气候风险披露、报表词频、文本分析数据集合(2007-2022年)

01、数据介绍 企业气候风险披露是指企业通过一定的方式&#xff0c;将气候变化对其影响、自身采取的应对措施等信息披露出来。这有助于投资者更准确地评估企业价值&#xff0c;发现投资机会&#xff0c;规避投资风险。解企业在气候风险方面的关注度和披露情况。 可以帮助利益…

Django后台项目开发实战七

为后台管理系统换风格 第七阶段 安装皮肤包 pip install django-grappelli 在 setting.py 注册 INSTALLED_APPS [grappelli,django.contrib.admin,django.contrib.auth,django.contrib.contenttypes,django.contrib.sessions,django.contrib.messages,django.contrib.stat…

【yolov8】yolov8剪枝训练流程

yolov8剪枝训练流程 流程&#xff1a; 约束剪枝微调 一、正常训练 yolo train model./weights/yolov8s.pt datayolo_bvn.yaml epochs100 ampFalse projectprun nametrain二、约束训练 2.1 修改YOLOv8代码&#xff1a; ultralytics/yolo/engine/trainer.py 添加内容&#…