学习css过渡动画-transition

文章目录

  • 前言
  • transition属性语法
  • 宽度改变效果
  • 透明度改变效果
  • 位置改变效果
    • `如有启发,可点赞收藏哟~`


前言

通常,当一个元素的样式属性值发生变化时,会立即看到页面发生变化。
css属性transition能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态,从而表现出一种动画过程。

transition属性语法

属性介绍
transition-property元素的哪一个属性将用过渡表现。例如, opacity,color。默认值是all。
transition-duration元素过渡过程持续时间。例如,1s。默认值是0s。
transition-timing-function元素过渡时的速率函数。例如, linear、 ease-in、steps动画分段函数或自定义的 cubic-bezier 函数)。默认值是ease,中间快,两头慢。
transition-delay元素过渡延迟的时间。例如,1s。默认值是0s
transition没有定义上述的,可以按照上述的属性依次填写,空格格式。且可以以逗号隔开操作多种不同元素属性的配置

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

属性和方法太多,可按实际效果调试


宽度改变效果

<template><div class="content" :class="{'content-fade': fade}"></div>
</template><script>
import { defineComponent, ref } from "vue";export default defineComponent({name: "App",components: {},setup() {const fade = ref(true);const change = () => (fade.value = !fade.value);setInterval(() => {change()}, 4000);return {fade,};},
});
</script>
<style scoped>
.content {width: 200px;height: 120px;background-color: aqua;transition: width 3s;/* transition: width 3s steps(+3); */
}
.content-fade {width: 50px;
};
</style>

透明度改变效果

<template><div class="content" :class="{'content-fade': fade}"></div>
</template><script>
import { defineComponent, ref } from "vue";export default defineComponent({name: "App",components: {},setup() {const fade = ref(true);const change = () => (fade.value = !fade.value);change()setInterval(() => {change()}, 3000);return {fade,};},
});
</script>
<style scoped>
.content {width: 200px;height: 120px;background-color: aqua;transition: opacity 3s ;
}
.content-fade {opacity: 0;
};
</style>

位置改变效果

<template><div class="page"><divclass="circle":class="[fade ? 'circle-fade-in' : 'circle-fade-out']"></div></div>
</template><script>
import { defineComponent, ref } from "vue";export default defineComponent({name: "App",components: {},setup() {const fade = ref(true);const change = () => (fade.value = !fade.value);setInterval(() => {change();}, 5000);return {fade,};},
});
</script>
<style scoped>
.page {width: 100vw;height: 100vh;position: relative;
}
.circle {position: absolute;width: 120px;height: 120px;border-radius: 50%;background-color: aqua;transition: all 5s linear;
}
.circle-fade-in {top: 0px;left: 0px;
}
.circle-fade-out {top: calc(100vh - 120px);left: calc(100vw - 120px);
}
</style>

如有启发,可点赞收藏哟~

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

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

相关文章

Linux 环境删除Conda

你可以按照以下步骤操作来删除Conda&#xff1a; 首先&#xff0c;停止所有conda环境。在终端中运行以下命令&#xff1a; conda deactivate然后使用以下命令获取conda安装的路径&#xff1a; which conda如果成功安装了conda&#xff0c;该命令输出的路径应该是类似于这样的&a…

Flink1.17 DataStream API

目录 一.执行环境&#xff08;Execution Environment&#xff09; 1.1 创建执行环境 1.2 执行模式 1.3 触发程序执行 二.源算子&#xff08;Source&#xff09; 2.1 从集合中读取数据 2.2 从文件读取数据 2.3 从 RabbitMQ 中读取数据 2.4 从数据生成器读取数据 2.5 …

计算机毕业设计选题推荐-二手交易跳蚤市场微信小程序/安卓APP-项目实战

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

Java Swing算 24 点

内容要求 1&#xff09; 本次程序设计是专门针对 Java 课程的,要求使用 Java 语言进行具有一定代码量的程序开发。程序的设计要结合一定的算法&#xff0c;在进行代码编写前要能够设计好自己的算法。 2&#xff09;本次程序设计涉及到 Java 的基本语法&#xff0c;即课堂上所…

SQLite3 数据库学习(文章链接汇总)

参考引用 SQLite 权威指南&#xff08;第二版&#xff09;SQLite3 入门 SQLite3 数据库学习&#xff08;一&#xff09;&#xff1a;数据库和 SQLite 基础 SQLite3 数据库学习&#xff08;二&#xff09;&#xff1a;SQLite 中的 SQL 语句详解 SQLite3 数据库学习&#xff08;三…

android —— 阴影效果和跑马灯效果Textview

1、带阴影的TextView ①、 android:shadowColor“color/black” 设置阴影颜色&#xff0c;需要与shadowRadius一起使用 ②、android:shadowRadius“3.0” 设置阴影模糊程度&#xff0c;设为0.1会变成字体颜色&#xff0c;建议设置3.0 ③、android:shadowDx“10” 设置阴影在水…

Pair用法示例:

这里用到了 org.apache.commons.lang3.tuple.Pair 来封装数据&#xff08;就是不想自己再写一个 DO 或者 VO 或者 MO&#xff09; 在Java中&#xff0c;Pair是一种简单的数据结构&#xff0c;用于存储两个相关联的值。它没有特定的内置类&#xff0c;但可以通过自定义实现或使…

ubuntu下载conda

系统&#xff1a;Ubuntu18.04 &#xff08;1&#xff09;下载安装包 wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.11-Linux-x86_64.sh 报错错误 403&#xff1a;Forbidden 解决方法 wget -U NoSuchBrowser/1.0 https://mirrors.tuna.tsingh…

Smart Tomcat的使用

文章目录 Smart Tomcat的作用Smart Tomcat的安装Smart Tomcat的配置Smart Tomcat的启动 Smart Tomcat的作用 我们知道使用Servlet来完成一个项目一共需要七个步骤&#xff0c;即创建maven项目、添加依赖、创建目录结构、编写代码、打包程序、部署程序、验证程序。这样的确是完…

让资产权利归于建设者:Kiosk使过程变得更简单

区块链凭借着其将人的权利地位置于平台之上的能力&#xff0c;可以重塑互联网&#xff0c;而自托管为个人提供了控制和管理其资产和数据的能力。链上交易支持建设者和客户之间的点对点交易。这些特质联合起来&#xff0c;可以将数字世界从基于价值提取的模式转变为基于价值创造…

应用场景丨迭代市政综合管廊监测系统建设

市政综合管廊是指在城市地下建造的隧道空间&#xff0c;将市政、电力、通讯、燃气、给排水等各种管线集于一体&#xff0c;实施统一规划、设计、建设和管理。综合管廊有利于解决反复开挖路面、架空线网密集、管线事故频发等问题&#xff0c;是保障城市运行的重要基础设施和“生…

【2023C卷题限时免费】20天拿下华为OD笔试之 【不定滑窗】2023C-最长的指定瑕疵度的元音子串【欧弟算法】全网注释最详细分类最全的华为OD真题题解

文章目录 题目描述与示例题目描述输入描述输出描述示例一输入输出说明 示例二输入输出说明 示例三输入输出说明 解题思路滑窗三问滑窗三答 代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目描述与示例 题目描述 头和结尾都是元音字母&#xff08;a…

小程序判断是否授权位置信息和手动授权

文章目录 概要微信小程序的&#xff0c;使用的是高德地图 概要 当用户来到页面之后就会弹出是否授权弹框&#xff0c;但是如果第一次关闭之后&#xff0c;下一次再过来的话页面的授权弹框就不出现了&#xff0c;针对于这种情况写了一个方法 微信小程序的&#xff0c;使用的是…

C#WPF数据触发器实例

本文讲解C#WPF数据触发器的实例 当绑定的数据满足某些条件时,数据触发器会执行某些操作 实例 创建项目 ListBox及触发器使用实例 UI界面 <Windowx:Class="TriggerDemo.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&q…

V10 桌面版、服务器版系统加固

V10 桌面版、服务器版系统加固 一、 文档说明 本文档中涉及的加固方法主要包括&#xff1a;密码策略配置、防火墙规 则配置、禁用高风险服务等。 二、 V10 桌面版系统加固 2.1 密码策略配置 密码策略包括密码老化控制策略和密码复杂度策略。密码老化 控制策略需要配置/etc…

【C++入门到精通】右值引用 | 完美转发 C++11 [ C++入门 ]

阅读导航 引言一、左值引用和右值引用1. 什么是左值&#xff1f;什么是左值引用&#xff1f;2. 什么是右值&#xff1f;什么是右值引用&#xff1f;3. move( )函数 二、左值引用与右值引用比较三、右值引用使用场景和意义四、完美转发std::forward 函数完美转发实际中的使用场景…

【LearnOpenGL基础入门——3】绘制纯色三角形

目录 一.写在前面 二.顶点输入 三.顶点着色器 四.编译着色器 五.片段着色器 六.着色器程序 七.链接顶点属性 彩蛋 一.写在前面 我们先认识一下OpenGL常用的几个名词&#xff1a; 顶点数组对象&#xff1a;Vertex Array Object&#xff0c;VAO顶点缓冲对象&#xff1a;…

2023全新付费进群系统源码 带定位完整版 附教程

这源码是我付费花钱买的分享给大家&#xff0c;功能完整。 搭建教程 Nginx1.2 PHP5.6-7.2均可 最好是7.2 第一步上传文件程序到网站根目录解压 第二步导入数据库&#xff08;58soho.cn.sql&#xff09; 第三步修改/config/database.php里面的数据库地址 第四步修改/conf…

linux配置固定ip(两种方法)

首先刚下载的vm&#xff0c;刚创建的虚拟机&#xff0c;肯定是需要配置ip的 其次以前我的每次都是设置自动ip&#xff0c;这样每次登录都会自动获取ip地址&#xff0c;并且每次的ip都不相同。 ~方法&#xff1a; 开机登陆后 1)Cd /etc/sysconfig/network-scripts 2)Vi ifcf…