Vue前端开发之自定义动画样式

在上一小节中,我们介绍了动画的实现源于6个类别样式,它们的名称默认前缀是一个“v”字母或者指定的名称,如“sc”,其实,也可以不使用这些固定的类别样式,开发者可以自定义任意的类别样式,供动画组件调用,同样也可以实现元素的动画效果。

在动画组件transition中,可以接收自定义类别样式的属性有6个,名称分别为:enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class和leave-to-class,它们的功能与动画组件默认6个类别样式一致。

接下来通过一个示例来演示如何调用自定义动画样式来实现元素的动画效果。

实例5-3 应用自定义动画样式

1. 功能描述

在上述示例5-1的基础上,当单击按钮时,通过应用自定义动画的样式,实现元素以动画的形式显示与隐藏。

2. 实现代码

在项目components 文件夹的ch5子文件夹中,添加一个名为“CustClassName”的.vue文件,在文件中加入如清单5-3所示代码。

代码清单5-3 CustClassName.vue代码

<template><div class="action"><div class="act"><input type="button" @click="startTrans()" :value="blnShow ? '隐藏动画' : '显示动画'"></div><transition enter-active-class="enter" 
leave-active-class="leave"><div class="mytrans" v-if="blnShow"></div></transition></div>
</template>
<script>
export default {name: "CustClassName",data() {return {blnShow: true};},methods: {startTrans() {this.blnShow = !this.blnShow;}},
};
</script>
<style>
.enter {animation: myanimate 0.5s;
}
.leave {animation: myanimate 0.5s reverse;
}
@keyframes myanimate {from {transform: translateX(-100%);}to {transform: translateX(0px);}
}
.action .act {margin: 10px 0;
}
.action .act input {width: 80px;height: 32px;
}
.mytrans {width: 200px;height: 30px;background-color: #ccc;
}
</style>

3. 页面效果

保存代码后,页面在Chrome浏览器下执行的页面效果如图5-4所示。
在这里插入图片描述
4. 源码分析

在上述示例的代码中,向动画组件transition 的enter-active-class和leave-active-class属性添加了两个自定义的类别样式,从而实现了元素的动画效果。

另外,在动画组件包裹的元素虽然应用了动画效果,但它必须要通过样式的切换来才会触发,如元素的显示与隐藏,组件也允许首次渲染完成后就自动触发,只需要向组件添加一个名称为appear所属性,如下代码所示。

<transition enter-active-class="enter" leave-active-class="leave" appear><div class="mytrans" v-if="blnShow"></div>
</transition>

无论是何种动画效果,只要在组件中添加该属性,那么,当组件中元素首次渲染完成后,都会自动触发设置的动画效果一次。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【709】基于SSM+vue的“萌宠小知识”网站设计与实现

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统萌宠小知识信息管理难度大&#xff0c;容错率低&#xff…

《机器学习by周志华》学习笔记-神经网络-05RBF径向基函数网络

1、背景 1988年,Broomhead和Lowe用径向基函数(Radialbasis function, RBF)提出分层网络的设计方法,从而将神经网络的设计与数值分析和线性适应滤波相挂钩。 2、概念 RBF(Radial Basis Function,径向基函数)网络是一种单隐层前馈神经网络,即该网络只有3层,输入层、隐含…

11.1组会汇报-基于区块链的安全多方计算研究现状与展望

基础知识 *1.背书&#xff0c;这个词源来自银行票据业务&#xff0c;是指票据转让时&#xff0c;原持有人在票据背面加盖自己的印鉴&#xff0c;证明该票据真实有效、如果有问题就可以找原持有人。 区块链中的背书就好理解了。可以简单的理解为验证交易并声明此交易合法&…

MSC“名实之辩”:精准鉴定只为精准治疗

前 言 MSC是一群来源广泛、能够体外增殖分化的异质性细胞。MSC具有免疫调节、促进组织修复等作用&#xff0c;应用于多种疾病的治疗。由于科学进程、习惯等原因&#xff0c;MSC具有多种名称。自先秦以来&#xff0c;就有“名实之辩”&#xff0c;今日我们就讲一讲MSC的名称与…

CST联合Isight进行天线DOE设计

本期我们转载一篇国外工程师Matthias MEIENHOFER&#xff0c;利用CST和Isight联合进行DOE设计的案例。 本文通过模拟设计一个双频带&#xff08;GSM和WLAN&#xff09;天线来研究天线的几何尺寸变化和性能的关系。如果我们改变天线里的某些宽度或长度参数&#xff0c;天线的性…

微信小程序寓言童话创作APP设计与实现

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 本文通过对现有寓言童话创作APP的调研和分析&#xff0c;取其精华去其糟粕&#xff0c;遵循软件工程方法进行系统分析、…

越来越多人不喜欢十六薪了

十六薪是个坑 大家好,我是青玉白露。 最近刷各种论坛&#xff0c;发现有个有意思的职场现象。 不少人开始对"十五薪"、“十六薪”敬而远之。 曾经让人眼红的福利,现在却成了让人望而却步的"坑"。这是咋回事呢? 乍一看,十五薪确实挺诱人。比如月薪3万,年收…

【命令执行waf绕过】

一、绕过空格 二、绕过黑名单 三、绕过长度限制 四、练习 发现了两个文件&#xff0c;cat读取&#xff0c;但是被过滤了&#xff1a; 用 I F S IFS IFS绕过读出index的源码&#xff0c;发现过滤了很多东西&#xff0c;黑名单过滤&#xff1a; 字符串拼接绕过&#xff1a; …

MongoDB笔记02-MongoDB基本常用命令

文章目录 一、前言二、数据库操作2.1 选择和创建数据库2.2 数据库的删除 3 集合操作3.1 集合的显式创建3.2 集合的隐式创建3.3 集合的删除 四、文档基本CRUD4.1 文档的插入4.1.1 单个文档插入4.1.2 批量插入 4.2 文档的基本查询4.2.1 查询所有4.2.2 投影查询&#xff08;Projec…

六、SpringMVC的视图

文章目录 1. ThymeleafView2. 转发视图3. 重定向视图4. 视图控制器view-controller 1. ThymeleafView 2. 转发视图 3. 重定向视图 4. 视图控制器view-controller

springboot系列十三: 异常处理

springboot异常处理 基本介绍拦截器VS过滤器默认异常页面应用实例debug取出状态码和错误信息 全局异常基本说明应用实例Debug处理流程 自定义异常基本说明应用实例Debug处理流程注意事项和细节 基本介绍 1.默认情况下&#xff0c;SpringBoot 提供 /error 处理所有错误的映射&a…

无人机手势控制工作原理和算法!

一、无人机手势控制的工作原理 无人机手势控制的工作原理基于计算机视觉技术和图像识别技术。具体来说&#xff0c;无人机上配备的摄像头会捕捉用户的手势动作&#xff0c;并将这些图像数据传输到无人机内置的处理器中。处理器通过内置的算法对图像进行处理和解析&#xff0c;…

雷池社区版 7.1.0 LTS 发布了

LTS&#xff08;Long Term Support&#xff0c;长期支持版本&#xff09;是软件开发中的一个概念&#xff0c;表示该版本将获得较长时间的支持和更新&#xff0c;通常包含稳定性、性能改进和安全修复&#xff0c;但不包含频繁的新特性更新。 作为最受欢迎的社区waf&#xff0c…

自动驾驶---理想汽车智驾进展

1 背景 自媒体---“电车通”从2024年初开始推出智能化评测相关栏目&#xff0c;尤其是针对智能驾驶这一功能做了大量的实测工作&#xff1b;根据综合表现&#xff0c;给测试车型给出了能够直观展示其能力的评分。当评测的对象达到一定数量后&#xff0c;对整个国内车市智驾能力…

跨越科技与文化的桥梁——ROSCon China 2024 即将盛大开幕

在全球机器人技术飞速发展的浪潮中&#xff0c;ROS&#xff08;Robot Operating System&#xff09;作为一款开源的机器人操作系统&#xff0c;已成为无数开发者、研究人员和企业的首选工具。为了进一步推动ROS的应用与发展&#xff0c;全球知名的机器人操作系统会议——ROSCon…

制作并量化GGUF模型上传到HuggingFace和ModelScope

llama.cpp 是 Ollama、LMStudio 和其他很多热门项目的底层实现&#xff0c;也是 GPUStack 所支持的推理引擎之一&#xff0c;它提供了 GGUF 模型文件格式。GGUF (General Gaussian U-Net Format) 是一种用于存储模型以进行推理的文件格式&#xff0c;旨在针对推理进行优化&…

docker+nacos

安装数据库 以docker安装为例&#xff08;实际建议实体&#xff09; 初始化数据库 /******************************************/ /* 数据库全名 nacos_config */ /* 表名称 config_info */ /******************************************/ CREATE TABLE config_i…

Linux入门(2)

林纳斯托瓦兹 Linux之父 1. echo echo是向指定文件打印内容 ehco要打印的内容&#xff0c;不加任何操作就默认打印到显示器文件上。 知识点 在Linux下&#xff0c;一切皆文件。 打印到显示器&#xff0c;显示器也是文件。 2.重定向 >重定向操作&#xff0c;>指向的…

PL端:HDMI 输出实验

实验环境 vivado 2024.1 实验任务 做一个 HDMI 输出的彩条 硬件介绍 开发板没有HDMI编码芯片&#xff0c;是将FPGA的3.3差分IO直接连接到HDMI连接器&#xff0c;FPGA 完成 24 位 RGB 编码输出TMDS 差分信号。 HDMI传输要素&#xff1a; TMDS 差分信号 TMDS&#xff08…

江协科技STM32学习- P35 硬件I2C读写MPU6050

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…