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

news2024/12/23 13:12:30

一. 问题描述

想做一个文字透明度从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>

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

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

相关文章

芯片解决方案--SL8541e-OpenHarmony适配方案

摘要 本文描述8541E芯片适配OpenHarmony的整体方案。 本文描述的整体方案&#xff0c;不止适用于8541e&#xff0c;也适用于该芯片厂家的其他芯片&#xff0c;如7863、7885&#xff0c;少部分子系统会略有差异。 整体方案架构 整体方案架构如下图&#xff0c;遵循OpenHarmo…

4K4D: Real-Time 4D View Synthesis at 4K Resolution 学习笔记

本文是学习4K4D的笔记记录 Project Page&#xff1a;https://zju3dv.github.io/4k4d/ 文章目录 1 Pipeline1.1 特征向量的计算1.2 几何建模1.3 外观建模⭐1&#xff09; 球谐函数SH模型2&#xff09; 图像融合技术 1.4 可微分深度剥离渲染 2 Train&#xff08;loss&#xff09;…

2024/9/6黑马头条跟学笔记(四)

D4内容介绍 阿里三方安全审核 分布式主键 异步调用 feign 熔断降级 1.自媒体文章自动审核 1.1审核流程 查文章——调接口文本审核——minio下载图片图片审核——审核通过保存文章——发布 草稿1&#xff0c;失败2&#xff0c;人工3&#xff0c;发布9 1.2接口获取 注册阿…

云原生之WEB应用服务器Tomcat(持续更新中)

WEB应用服务器Tomcat 1.Tomcat功能介绍1.1 安装Tomcat1.2 生成启动文件 2.结合反向代理实现Tomcat部署2.1 利用nginx反向代理实现 3.Memcached&#xff08;解决sion丢失问题&#xff09;3.1 简介3.2 安装与启动 4.session 共享服务器 1.Tomcat功能介绍 Tomcat 服务器是一个免费…

Cmake之2.6版本重要特性及用法实例(十一)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…

西班牙语语法之西语前置词学习柯桥学外语到银泰对面

前置词用法大盘点 ▼ 1.a 表示行进的方向&#xff1a; Voy a la playa. 我要去海滩。 表示具体的位置&#xff1a; al norte del palacio 在宫殿北侧。 表示具体的时间&#xff1a; Me levanto a las 6. 我6点起床。 表示命令&#xff1a; ¡A trabajar! 工作&#…

linux服务器之top命令详解

top&#xff1a;系统资源管理器 top命令类似于windows的任务管理器&#xff0c;可以查看内存、cpu、进程等信息(动态查看系统资源信息)在linux系统中常用top命令查看资源性能分析工具 一、参数释义&#xff1a; 第一行 系统时间和平均负载 top&#xff1a;名称22:12:46&#…

[数据结构] 哈希结构的哈希冲突解决哈希冲突

标题&#xff1a;[C] 哈希结构的哈希冲突 && 解决哈希冲突 水墨不写bug 目录 一、引言 1.哈希 2.哈希冲突 3.哈希函数 二、解决哈希冲突 1.闭散列 I&#xff0c;线性探测 II&#xff0c;二次探测 2.开散列 正文开始&#xff1a; 一、引言 哈希表是一种非常实用而…

移动UI:分类列表页、筛选页的设计揭秘。

移动UI的列表页设计需要考虑用户体验和界面美观性&#xff0c;以下是一些建议的设计要点&#xff1a; 1. 列表项的展示&#xff1a; 列表页应该清晰地展示各个列表项&#xff0c;包括标题、副标题、缩略图等内容&#xff0c;以便用户快速浏览和识别。可以使用卡片式布局或者简…

计算机毕业设计选题推荐-班级管理系统-教务管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

多云架构下大模型训练的存储稳定性探索

一、多云架构与大模型训练的融合 &#xff08;一&#xff09;多云架构的优势与挑战 多云架构为大模型训练带来了诸多优势。首先&#xff0c;资源灵活性显著提高&#xff0c;不同的云平台可以提供不同类型的计算资源和存储服务&#xff0c;满足大模型训练在不同阶段的需求。例…

机器学习之监督学习(四)决策树和随机森林

机器学习之监督学习&#xff08;四&#xff09;决策树和随机森林 0. 文章传送1. 决策树 Decision Tree案例引入构建过程 0. 文章传送 机器学习之监督学习&#xff08;一&#xff09;线性回归、多项式回归、算法优化[巨详细笔记] 机器学习之监督学习&#xff08;二&#xff09;…

YOLOv8改进实战 | 注意力篇 | 引入ICCV2023顶会LSKNet:大选择性卷积注意力模块LSKA,助力小目标检测

YOLOv8专栏导航:点击此处跳转 前言 YOLOv8 是由 YOLOv5 的发布者 Ultralytics 发布的最新版本的 YOLO。它可用于对象检测、分割、分类任务以及大型数据集的学习,并且可以在包括 CPU 和 GPU 在内的各种硬件上执行。 YOLOv8 是一种尖端的、最先进的 (SOTA) 模型,它建立在以前…

Leetcode JAVA刷刷站(113)路径总和 ||

一、题目概述 二、思路方向 为了找出从根节点到叶子节点路径总和等于给定目标和的所有路径&#xff0c;我们可以使用深度优先搜索&#xff08;DFS&#xff09;的方法。在遍历过程中&#xff0c;我们维护一个当前路径的和以及一个列表来存储当前路径的节点值。当我们到达一个叶…

HarmonyOS云端开发(二)

文章目录 登录认证服务以及云数据库使用一创建登录注册页面二、开启认证服务二、创建数据表1.导出数据表2.使用表 进行增删改查3.查看云数据库 登录认证服务以及云数据库使用 云端开发不需要存储token,由提供的API统一验证&#xff0c;假设未登录则跳转登录页&#xff0c;已登…

uniapp,vite整合windicss

官方文档&#xff1a;https://weapp-tw.icebreaker.top/docs/quick-start/frameworks/hbuilderx 安装&#xff1a; npm i -D tailwindcss postcss autoprefixer # 初始化 tailwind.config.js 文件 npx tailwindcss initnpm i -D weapp-tailwindcss# 假如 tailwindcss 在 weap…

nginx 新建一个 PC web 站点

注意&#xff1a;进行实例之前必须完成nginx的源码编译。&#xff08;阅读往期文章完成步骤&#xff09; 1.编辑nginx的配置文件&#xff0c;修改内容 [rootlocalhost ~]# vim /usr/local/nginx/conf/nginx.conf 2.创建新目录/usr/local/nginx/conf.d/&#xff0c;编辑新文件…

JavaScript (输出,语句,语法)

目录 JavaScript 输出 使用window.alert() 写入警示框 使用document.write() 写入HTMl输入 使用 innerHTML 写入html元素 使用console.log&#xff08;&#xff09;写入 浏览器控制台 JavaScript 语句 实例 语句组成 分号 关键字 JavaScript 语法 JavaScript 标识符 …

【Hadoop|MapReduce篇】MapReduce概述

1. MapReduce定义 MapReduce是一个分布式运算程序的编程框架&#xff0c;是用户开发“基于Hadoop的数据分析应用”的核心框架。 MapReduce核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序&#xff0c;并发运行在一个Hadoop集群上。 2. Map…

项目——负载均衡OJ

项目要实现的一个整体的功能&#xff1a; 编写一个在线OJ网络服务器,只实现类似 leetcode 的题目列表在线编程功能 项目宏观结构: Oj服务器在收到提交的代码时&#xff0c;把代码负载均衡的选择发送给其他几个编译与运行服务器去编译运行代码&#xff0c;判断代码的编译运行结…