当前位置： 首页 > news >正文

【前端】animation动画以及利用vue制作简单的透明度改变动画，包含vue生命周期实现

news 2025/12/29 11:21:23

一. 问题描述

想做一个文字透明度从1到0然后再从0到1的css动画。

二. 代码写法

2.1 animation写法

2.1.1 animation属性key

在这里插入图片描述

2.1.2 代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script><style>#root h2{animation: mymove 2s infinite;}@keyframes mymove{0%{ opacity: 1;}50%{opacity: 0;}100%{opacity: 1;}}</style>
</head>
<body><div id="root"><h2 :style="{opacity}"> Welcome to Carling's world!</h2></div>
</body>
<script type="text/javascript"></script>
</html>

2.2 vue代码展示

2.2.1 vue无生命周期实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h2 :style="{opacity}"> Welcome to Carling's world!</h2></div>
</body>
<script type="text/javascript">Vue.config.devtools = false;//改变标题透明度const vm = new Vue({el:'#root',data:{opacity:1}});var flag = 1;setInterval(()=>{if(flag == 1){vm.opacity -= 0.01;}else{vm.opacity += 0.01;}if(vm.opacity <= 0){flag = -1;}else if(vm.opacity >= 1){flag = 1;}   },16);
</script>
</html>

2.2.1 vue生命周期实现

2.2.1.1 生命周期方法

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script><style></style>
</head>
<body><div id="root"><h2 :style="{opacity}"> Welcome to Carling's world!</h2></div>
</body>
<script type="text/javascript">Vue.config.devtools = false;//改变标题透明度const vm = new Vue({el:'#root',data:{opacity:1,flag:1},created(){this.change()},methods:{change(){setInterval(()=>{if(this.flag == 1){this.opacity -= 0.01;}else{this.opacity += 0.01;}if(this.opacity <= 0){this.flag = -1;}else if(this.opacity >= 1){this.flag = 1;}   },16);},}});
</script>
</html>

相关文章：

【前端】animation动画以及利用vue制作简单的透明度改变动画，包含vue生命周期实现

一. 问题描述 想做一个文字透明度从1到0然后再从0到1的css动画。 二. 代码写法 2.1 animation写法 2.1.1 animation属性key 2.1.2 代码展示 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"…...

编程日记 2024/9/7 18:32:07

mysql优化案例分享

一、mysql介绍 1、InnoDB引擎 mysql5.5.8版本开始后。InnoDB引擎就是默认存储引擎&#xff0c;本文介绍知识点也都是围绕该引擎展开。 知识点1聚集存储 InnoDB引擎采用聚集存储&#xff0c;即每张表的存储都是主键的顺序进行存放&#xff0c;也就是每行存储的物理顺序和主键…...

编程日记 2024/9/7 18:30:57

C语言中结构体struct和联合体union的区别

C语言 文章目录 C语言前言一、什么是结构体二、什么是联合体三、结构体和联合体的区别 前言 一、什么是结构体 在C语言中&#xff0c;结构体指的是一种数据结构&#xff0c;是C语言中聚合数据类型的一类。结构体可以被声明为变量、指针或数组等&#xff0c;用以实现较复杂的数…...

编程日记 2024/9/7 18:26:52

Verilog：【8】基于FPGA实现SD NAND FLASH的SPI协议读写

Verilog&#xff1a;【8】基于FPGA实现SD NAND FLASH的SPI协议读写 在此介绍的是使用FPGA实现SD NAND FLASH的读写操作&#xff0c;以雷龙发展提供的CS创世SD NAND FLASH样品为例&#xff0c;分别讲解电路连接、读写时序与仿真和实验结果。 目录 1 FLASH背景介绍 2 样品申请 3…...

编程日记 2024/9/7 18:25:51

目标检测-RT-DETR

RT-DETR (Real-Time Detection Transformer) 是一种结合了 Transformer 和实时目标检测的创新模型架构。它旨在解决现有目标检测模型在速度和精度之间的权衡问题&#xff0c;通过引入高效的 Transformer 模块和优化的检测头&#xff0c;提升了模型的实时性和准确性。RT-DETR 可…...

编程日记 2024/9/7 18:24:50

业务资源管理模式语言09

示例&#xff1a; 图13 表示了QuoteTheMaintenance 模式的一个实例&#xff0c;在汽车修理店系统中&#xff0c;其中“Vehicle”扮演“Resource”&#xff0c;“Repair Quotation”扮演“Maintenance Quotation”&#xff0c;“Repair shop branch”扮演“Source-party”&…...

编程日记 2024/9/7 18:23:49

Spring Boot + Vue 多级目录的构建详解

1. 背景介绍 1.1 为何选择 Spring Boot Vue&#xff1f; 在现代 Web 开发中&#xff0c;前后端分离已成为一种标准实践。Spring Boot 提供了强大的后端开发能力&#xff0c;尤其在构建企业级应用时&#xff0c;其轻量级、高效性和丰富的生态系统让开发者如虎添翼。而 Vue.js…...

编程日记 2024/9/7 18:22:48

Android的Launch

看了一下资料&#xff0c;其实差别并不像一般的bootloader之类那么大。基本上还是和普通的APK程序差不多&#xff0c;基本上是AMS启动的第一个带界面的程序&#xff0c;这个界面也是常规的开发模式。可以设置各种view&#xff0c;可以设置背景。 然后在这个程序中&#xff0c;…...

编程日记 2024/9/7 18:21:47

Deep Ocr

1.圈出内容,文本那里要有内容.然后你保存,并导出数据集. 2.找出deep_ocr_recognition_training_workflow.hdev 文件.修改“DatasetFilename : Test.hdict” 310行 write_deep_ocr (DeepOcrHandle, BestModelDeepOCRFilename) 3.推理test.hdev 但发现很慢&#xff0c;没有mlp…...

编程日记 2024/9/7 18:20:45

图片验证码

导入依赖 <dependencies><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.25</version></dependency> </dependencies> 代码 Service public class ValidateCodeServi…...

编程日记 2024/9/7 18:19:44

004: VTK读入数据---vtkImageData详细说明

VTK医学图像处理---vtkImageData类 目录 VTK医学图像处理---vtkImageData类 简介&#xff1a; 1 Mricro软件的安装和使用 (1) Mricro安装 (2) Mricro转换DICOM为裸数据 2 从硬盘读取数据到vtkImageData 3 vtkImageData转RGB或RGBA格式 4 练习 总结 简介&#xff1a;…...

编程日记 2024/9/7 18:18:34

分割千万级，将大文件分割为小件 csv

依赖 <dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.9.0</version></dependency> package com.topnet.controller;import com.topnet.utils.R; import lombok.extern.slf4j.Slf4…...

编程日记 2024/9/7 18:17:33

SQL COUNT() 函数深入解析

SQL COUNT() 函数深入解析 SQL&#xff08;Structured Query Language&#xff09;是一种用于管理关系数据库管理系统&#xff08;RDBMS&#xff09;的标准编程语言。在SQL中&#xff0c;COUNT() 函数是一个常用的聚合函数&#xff0c;用于计算数据表中的行数或特定列的值数量…...

编程日记 2024/9/7 18:14:29

vue3和vue2的双向绑定原理

Vue 的双向绑定是其核心特性之一&#xff0c;允许数据和视图之间保持同步。在 Vue 2 和 Vue 3 中&#xff0c;双向绑定的实现原理有所不同。以下是两者的原理对比&#xff1a; Vue 2 的双向绑定原理 在 Vue 2 中&#xff0c;双向绑定是通过以下机制实现的&#xff1a; 响应式…...

编程日记 2024/9/7 18:13:25

[C++]刷题

作者主页&#xff1a; 作者主页 本篇博客专栏&#xff1a;C 创作时间 &#xff1a;2024年6月20日 最后&#xff1a; 十分感谢你可以耐着性子把它读完和我可以坚持写到这里&#xff0c;送几句话&#xff0c;对你&#xff0c;也对我&#xff1a; 1.一个冷知识&#xff1a; …...

编程日记 2024/9/7 18:10:21

职称评审中，论文发表要求？

无论是医生、教师或其他等职业&#xff0c;职称评审无疑是一个非常重要的环节。而职称评审中的论文发表则是评定我们专业能力的重要一环&#xff0c;可如何才能让自己辛苦撰写的的论文被发表&#xff0c;达到论文发表都有哪些要求呢&#xff1f; 一、选题要新颖 编辑和审稿人…...

编程日记 2024/9/7 18:08:19

连续信号的matlab表示

复习信号与系统以及matlab 在matlab中连续信号使用较小的采样间隔来表四 1.单位阶跃信号 阶跃信号:一个理想的单位阶跃信号在时间 t 0 之前值为0&#xff0c;在 t 0 及之后值突然变为常数 A&#xff08;通常取 A 1&#xff09; %matlab表示连续信号,是让信号的采样间隔很小…...

编程日记 2024/9/7 18:02:13

centos7.9搭建mysql5.6主从

mysql5.6 搭建数据库配置主从 搭建数据库 官网下载软件包后上传 基于centos7.9搭建mysql5.6.42 [rootmysql02 ~]# ls anaconda-ks.cfg init.sh MySQL-5.6.42-1.el7.x86_64.rpm-bundle.tar解压 tar -xf MySQL-5.6.42-1.el7.x86_64.rpm-bundle.tar -C /opt/[rootmysql02 ~]…...

编程日记 2024/9/7 18:01:12

C#通过ACE OLEDB驱动程序访问 Access和 Excel

ACE 代表 Access Connectivity Engine。它是 Microsoft 提供的一组组件&#xff0c;用于访问和操作 Microsoft Access 数据库以及其他类似的文件格式&#xff0c;如 Excel 工作簿。ACE 主要包括以下几部分&#xff1a; ACE OLEDB 驱动程序&#xff1a;用于通过 OLE DB 提供程序…...

编程日记 2024/9/7 17:59:10

智能新纪元：GPT-Next引领的AI革命及其跨领域应用

GPT-Next&#xff1a;性能的百倍提升 在当今这个科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;无疑是最具活力和变革性的领域之一。最近&#xff0c;OpenAI在KDDI峰会上宣布了一项激动人心的消息&#xff1a;他们即将推出名为“GPT-Next”的新一代语言模…...

编程日记 2024/9/7 17:52:00

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/12/27 5:49:34

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/12/25 17:19:53

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/12/23 13:54:23

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/12/25 22:29:43

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/12/29 11:11:37

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/12/22 5:49:51