CSS transition详解

文章目录

    • 属性
      • transition-property
      • transition-duration
      • transition-timing-function
      • transition-delay
      • transition 简写属性
    • 方法
      • Element:transitionrun 事件
      • Element:transitionstart 事件
      • Element:transitionend 事件
      • Element:transitioncancel 事件
    • 示例
      • 方块旋转
      • 事件监听
      • 小球移动
    • 注意

CSS transition 提供了一种在更改 CSS 属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的,而不是立即生效的过程。

比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 CSS 过渡后该元素的颜色将按照一定的曲线速率从白色变化为黑色。这个过程可以自定义。

通常将两个状态之间的过渡称为隐式过渡,因为开始与结束之间的状态由浏览器决定。

CSS 过渡可以决定哪些属性发生动画效果(通过明确地列出这些属性),何时开始(通过设置延时),持续多久(通过设置时长)以及如何动画(通过定义缓动函数,如线性或先快后慢)。比如在不同的伪元素之间切换,像是 :hover:active 或者通过 JavaScript 实现的状态变化。

开发者可以定义哪一属性需以何种方式用于动画,由此允许创造复杂的过渡。然而因为为某些属性赋予动画无意义,所以这些属性无动画性。

备注: auto 值常常较复杂,规范指出不要在它上动画。一些用户代理,比如基于 Gecko 的,实现了这个需求;然而另外一些用户代理,比如基于 WebKit 的,没有这么严格限制。在 auto 上使用动画,取决于浏览器及其版本,可能会导致非预期结果,应当避免使用。

属性

以下 transition 属性,若有多个属性值,则以,(逗号)衔接。

transition-property

指定哪个或哪些 CSS 属性名称用于过渡。只有指定的属性才会在过渡中发生动画,其他属性仍如通常那样瞬间变化。如果指定简写属性(比如 background),那么其完整版中所有可以动画的属性都会被应用过渡。

取值如下:

  • none:没有过渡动画。
  • all初始值):所有可被动画的属性都表现出过渡动画。
  • <custom-ident>:属性名称。由小写字母 a 到 z,数字 0 到 9,下划线(_)和破折号(-)。第一个不能为非破折号字符或数字。同时,不能以两个破折号开头。通俗来说就是可以是自定义名称也可以是css规范中的属性名。

transition-duration

表示过渡属性从旧的值转变到新的值所需要的时间。你可以为所有属性指定一个值,或者指定多个值,或者为每个属性指定不同的时长。

该属性值以秒(s)或毫秒(ms)为单位指定过渡动画所需的时间。默认值为 0s,表示不会呈现过渡动画,属性会瞬间完成转变。不接受负值。

可以指定多个时长,每个时长会被应用到由 transition-property 指定的对应属性上。

如果某个属性的值列表小于 transition-property 的属性值数量,那么时长列表会重复,重复规则是按照现有值进行重复。例如:

如3s,则重复多个3s

div {transition-property: opacity, left, top, height;transition-duration: 3s;
}

将视为:

div {transition-property: opacity, left, top, height;transition-duration: 3s, 3s, 3s, 3s;
}

如果是3s,5s,则会重复多个3s,5s。

div {transition-property: opacity, left, top, height;transition-duration: 3s, 5s;
}

将视为:

div {transition-property: opacity, left, top, height;transition-duration: 3s, 5s, 3s, 5s;
}

类似地,如果某个属性的值列表长于 transition-property 的属性值数量,将被截短。例如:

div {transition-property: opacity, left;transition-duration: 3s, 5s, 2s, 1s;
}

将按下面这样处理:

div {transition-property: opacity, left;transition-duration: 3s, 5s;
}

transition-timing-function

CSS 属性受到过渡效应(transition effect)的影响,会产生不断变化的中间值,而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。初始值是ease

缓动函数定义属性如何计算。大多数缓动函数由四点定义一个立方贝塞尔曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。

实质上,通过这个函数会建立一条加速度曲线,因此在整个 transition 变化过程中,变化速度可以不断改变。这条加速度曲线被<timing-function>所定义,之后作用到每个 CSS 属性的过渡。

通过transition-property中定义的过渡属性,每个<timing-function> 的值与这个过渡属性相对应.

你可以指定 <timing-function> 个数少于或者多于属性个数。重复或者裁剪规则与transition-duration一致。

形式语法如下:

transition-timing-function = <easing-function>#  <easing-function> = linear                          |<linear-easing-function>        |<cubic-bezier-easing-function>  |<step-easing-function>          <linear-easing-function> = linear( <linear-stop-list> )  <cubic-bezier-easing-function> = ease                                                |ease-in                                             |ease-out                                            |ease-in-out                                         |cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )  <step-easing-function> = step-start                             |step-end                               |steps( <integer> , <step-position>? )  <linear-stop-list> = [ <linear-stop> ]#  <step-position> = jump-start  |jump-end    |jump-none   |jump-both   |start       |end         <linear-stop> = <number>               &&<linear-stop-length>?  <linear-stop-length> = <percentage>{1,2}  

语法书写示例如下:

/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;/* Function values */
transition-timing-function: steps(4, jump-end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);/* Steps Function keywords */
transition-timing-function: steps(4, jump-start);
transition-timing-function: steps(10, jump-end);
transition-timing-function: steps(20, jump-none);
transition-timing-function: steps(5, jump-both);
transition-timing-function: steps(6, start);
transition-timing-function: steps(8, end);/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: revert;
transition-timing-function: revert-layer;
transition-timing-function: unset;

transition-delay

表明动画效果属性生效之前需要等待的时间。

值以秒(s)或毫秒(ms)为单位,初始值为0s。取值为正时会延迟一段时间来响应过渡效果;取值为负时会导致过渡从值的绝对值时刻开始。

你可以指定多个延迟时间,每个延迟将会分别作用于你所指定的相符合的 css 属性(transition-property)。延迟时间个数少于或者多于属性个数。重复或者裁剪规则与transition-duration一致。

transition 简写属性

transition CSS 属性是 transition-propertytransition-durationtransition-timing-functiontransition-delay 的一个简写属性。

简写属性 CSS 语法如下:

transition: <property> <duration> <timing-function> <delay>;

CSS 过渡通常使用简写属性 transition 控制。这是最好的方式,可以避免属性值列表长度不一,节省在 CSS 代码上调试的时间。

transition属性可以被指定为一个或多个 CSS 属性的过渡效果,多个属性之间用逗号进行分隔。

每个单属性转换都描述了应该应用于单个属性的转换(或特殊值allnone)。这包括:

  • 零或一个值,表示转换应适用的属性。这可能是以下任何一种:
    • 关键字none
    • 关键字all
    • 命名 CSS 属性的 <custom-ident> 。
  • 零或一个 <single-transition-timing-function> 值表示要使用的过渡函数
  • 零,一或两个

transition属性的值个数超过可以接收的值的个数时该如何处理。简而言之,当transition属性的值个数超过可以接收的值的个数时,多余的值都会被忽略掉,不再进行解析。

标准语法

transition = <single-transition>#  <single-transition> = [ none | <single-transition-property> ]  ||<time>                                   ||<easing-function>                        ||<time>                                   <single-transition-property> = all             |<custom-ident> 

语法使用示例

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;/* property name | duration | delay */
transition: margin-right 4s 1s;/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;/* Apply to 2 properties */
transition:margin-right 4s,color 1s;/* Apply to all changed properties */
transition: all 0.5s ease-out;/* Global values */
transition: unset;

方法

Element:transitionrun 事件

当CSS transition 首次创建时,将触发 transitionrun 事件,即在任何 transition-delay 已经开始之前。此事件不可取消。

addEventListener()方法中使用事件名称,或设置事件处理程序。

element.addEventListener("transitionrun", (event) => {});element.ontransitionrun = (event) => {};

从其父接口 Event 继承属性,事件属性如下。

  • TransitionEvent.propertyName

    一个包含与transition相关联的CSS属性名称的字符串。

  • TransitionEvent.elapsedTime

    一个浮点数,给出此事件触发时transition运行的时间,单位为秒。此值不受过渡延迟特性的影响。对于 transitionstart 事件,elapsedTime 的值为 0.0(除非将 transition-delay 设置成了一个负值,在这种情况下,elapsedTime 为 (-1 * transition-delay))。

  • TransitionEvent.pseudoElement

    一个字符串,以 :: 开头,包含了transition 运行时所在的伪元素的名称。如果transition不是在伪元素而是在元素上运行,则为空字符串:‘’。

下面几种transition事件方法,与此一致。

Element:transitionstart 事件

transitionstart 事件会在 CSS transition 实际开始的时候触发,或者说在某个 transition-delay 已经结束之后触发。

下列代码对 transitionstart 事件添加了一个监听器:

element.addEventListener("transitionstart", () => {console.log("transition 开始");
});

一样的代码,但是使用 ontransitionstart 属性来替代 addEventListener()

element.ontransitionstart = () => {console.log("transition 开始");
};

Element:transitionend 事件

当CSS transition 完成时,将触发 transitionend 事件。此事件不可取消。

以下情况将不会触发transitionend事件

  1. 如果在完成之前删除了 transition,例如删除了 transition-property 或将 display 设置为 none ,则将不会触发该事件。
  2. 如果 transition-delaytransition-duration都是0s或两者都没有声明,则没有转换,也不会触发任何transition事件。
  3. 如果触发了 transitioncancel 事件,则 transitionend 事件将不会触发。

addEventListener()方法中使用事件名称,或设置事件处理程序。

addEventListener("transitionend", (event) => {});ontransitionend = (event) => {};

Element:transitioncancel 事件

transitioncancel 事件在 CSS 转换被取消时触发。

当以下情况时,过渡被取消:

  • 应用于目标的transition-property属性的值被更改
  • display属性被设置为"none"。
  • 转换在运行到完成之前就停止了,例如通过将鼠标移出悬浮过渡元素。

addEventListener()方法中使用事件名称,或设置事件处理程序。

addEventListener("transitioncancel", (event) => {});ontransitioncancel = (event) => {};

示例

方块旋转

<div class="box duration-1">0.5 秒</div><div class="box duration-2">2 秒</div><div class="box duration-3">4 秒</div><button id="change">变换</button>
.box {margin: 20px;padding: 10px;display: inline-block;width: 100px;height: 100px;background-color: red;font-size: 18px;transition-property: background-color, font-size, transform, color;transition-timing-function: ease-in-out;
}.transformed-state {transform: rotate(270deg);background-color: blue;color: yellow;font-size: 12px;
}.duration-1 {transition-duration: 0.5s;
}.duration-2 {transition-duration: 2s;
}.duration-3 {transition-duration: 4s;
}
function change() {const elements = document.querySelectorAll("div.box");for (const element of elements) {element.classList.toggle("transformed-state");}
}const changeButton = document.querySelector("#change");
changeButton.addEventListener("click", change);

事件监听

在下面的例子中,我们有一个简单的div元素,并设置了一个包含 delay 的 transition 样式。

<div class="transition">Hover over me</div>
<div class="message"></div>
.transition {width: 100px;height: 100px;background: red;transition-property: transform, background;transition-duration: 5s;transition-delay: 2s;
}.transition:hover {transform: rotate(90deg);background: silver;
}

对此,我们再添加一些 JavaScript 代码来指出 transitionstarttransitionrun 事件在哪里触发。

const domTransition = document.querySelector(".transition");
const domMessage = document.querySelector(".message");// 触发transitioncancel事件
domTransition.onclick = function () {// 点击元素使display属性被设置为"none"domTransition.style.display = "none";timeout = window.setTimeout(appear, 2000);function appear() {domTransition.style.display = "block";}// 或点击元素使应用于目标的transition-property属性的值被更改// domTransition.style.transitionProperty = 'width'
};domTransition.addEventListener("transitionrun", function (e) {domMessage.textContent = "transitionrun 触发了"console.log(e.propertyName+'触发了transitionrun') // 重复两次, e.propertyName不同
});domTransition.addEventListener("transitionstart", function (e) {domMessage.textContent = "transitionstart 触发了"console.log(e.propertyName+'触发了transitionstart') // 重复两次, e.propertyName不同
});// 鼠标移出悬浮过渡元素或点击使元素消失会触发
domTransition.addEventListener("transitioncancel", function (e) {domMessage.textContent = "transitioncancel 触发了"console.log(e.propertyName+'触发了transitioncancel') // 重复两次, e.propertyName不同
});domTransition.addEventListener("transitionend", function (e) {domMessage.textContent = "transitionend 触发了"console.log(e.propertyName+'触发了transitionend') // 重复两次, e.propertyName不同
});

不同的地方是:

  • transitionruntransition 创建的时候被触发。(或者说在某个 delay 开始的时候)
  • transitionstart 在动画实际开始的时候被触发。 (或者说在某个 delay 结束的时候)

小球移动

过渡可以使事情看起来更顺畅,而不需要对你的 JavaScript 功能做任何处理。

<p>随便点击某处来移动球</p>
<div class="ball"></div>

使用 JavaScript 将球移动到一个位置:

const el = document.querySelector('.ball');
document.addEventListener("click",(ev) => {el.style.transform = `translateY(${ev.clientY - 25}px)`;el.style.transform += `translateX(${ev.clientX - 25}px)`;},false,
);

使用 CSS 来平滑移动,只需简单地添加一个过渡效果:

.ball {border-radius: 25px;width: 50px;height: 50px;background: #c00;position: absolute;top: 0;left: 0;transition: transform 1s;
}

注意

在以下场景之后,应注意transition的使用:

  • 使用 .appendChild() 向 DOM 中添加元素
  • 移除元素的 display: none 属性

这就好像初始状态从未发生过,元素一直处于最终状态一样。

克服这个限制的简单方法是在修改过渡的CSS属性之前应用若干毫秒的 setTimeout() 函数。

  • 如下演示,如何规避使用 .appendChild() 向 DOM 中添加元素,动效不生效问题。

    还是用上面小球移动的示例,复用css。

    修改js如下:

    const domDiv = document.createElement('div');
    domDiv.className = 'ball';
    document.body.appendChild(domDiv);setTimeout(() => {domDiv.style.transform = 'translate(100px, 100px)';
    }, 20)
    
  • 如下演示,如何规避移除元素的 display: none 属性,动效不生效问题。

    还是用上面小球移动的示例,复用css,在这基础上添加 display: none;

    修改js如下:

    const domBall = document.querySelector('.ball');
    domBall.style.display = 'block';setTimeout(() => {domBall.style.transform = 'translate(100px, 100px)';
    }, 20)
    

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

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

相关文章

音频DAC,ADC,CODEC高性能立体声

想要让模拟信号和数字信号顺利“交往”&#xff0c;就需要一座像“鹊桥”一样的中介&#xff0c;将两种不同的语言转变成统一的语言&#xff0c;消除无语言障碍。这座鹊桥就是转换器芯片&#xff0c;也就是ADC芯片。ADC芯片的全称是Analog-to-Digital Converter, 即模拟数字转换…

【白盒测试】逻辑覆盖和路径测试的设计方法

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

互联网演进历程:从“全球等待”到“全球智慧”的技术革新与商业变革

文章目录 一、导言二、World Wide Wait (全球等待)阶段1. 技术角度2. 用户体验3. 企业收益4. 教育影响 三、World Wide Web (万维网)阶段1. 技术角度2. 用户体验3. 企业收益4. 教育影响 四、World Wide Wisdom (全球智慧)阶段1. 技术角度2. 用户体验3. 企业收益4. 教育影响 五、…

Java编程中的IO模型详解:BIO,NIO,AIO的区别与实际应用场景分析

IO模型 IO模型就是说用什么样的通道进行数据的发送和接收&#xff0c;Java 共支持3种网络编程IO 模式&#xff1a;BIO,NIO,AIO BIO(Blocking lO) 同步阻塞模型&#xff0c; 一个客户端连接对应一个处理线程 代码示例&#xff1a; package com.tuling.bio; import java.io.…

DeepL翻译器,一直想使用怎么办?

作为一个独立开发者&#xff0c;将应用程序翻译到不同语言是个让我很头大的事情。请专业人员翻译太贵无法承受&#xff0c;谷歌翻译质量太差时常词不达意。 如何使用 DeepL 使用起来很直观&#xff0c;打开此网页粘贴要翻译的内容即可。它也支持 macOS 和 PC 端。 这里开我们开…

LinuxShell

一、 新建用户 在Linux上新建一个用户并赋予超级用户权限&#xff0c;建立家目录并设置默认shell为bash&#xff0c;并设置Linux在输入sudo密码时显示星号。请提交全部命令及输出截图&#xff08;表明完成需求即可&#xff09;。 1.sudo useradd -m ymhs(用户名) 增加用户 2.su…

SpingBoot的项目实战--模拟电商【5.沙箱支付】

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringBoot电商项目的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一. 沙箱支付是什么 二.Sp…

2分钟了解什么是socket?

文章目录 概念比喻类型Socket 与 TCP、UDP的关系 概念 Socket 是提供网络通信功能的编程接口&#xff08;API&#xff09;&#xff0c;提供了网络通信的基本操作&#xff0c;允许程序或进程之间进行数据交换。是传输层协议的具体软件实现&#xff0c;它封装了协议底层的复杂实…

【干货】Windows中定时删除system32目录下的.dmp文件教程

旭帆科技的技术人员除了给用户答疑解惑以外&#xff0c;还会主动测试软件性能&#xff0c;进行平台优化&#xff0c;除此之外&#xff0c;技术人员还会总结一些技术干货&#xff0c;这不&#xff0c;近期又提供了一份如何在Windows中定时删除system32目录下的.dmp文件的教程。感…

CRM软件对企业发展起着哪些作用?CRM的功能解析

虽然不少科技成果昙花一现&#xff0c;但CRM管理系统作为销售和营销领域的核心技术&#xff0c;已经牢牢占据了不可撼动的地位。拥有一个部署得当的CRM系统能为企业带来诸多好处。它可以跟踪和管理销售人员与潜在/现有客户的所有互动和沟通&#xff0c;并帮助他们识别出需要重点…

msvcp140.dll文件缺失要怎么修复?msvcp140.dll重新安装的解决方法

使用Windows系统时&#xff0c;dll文件丢失的问题时有发生&#xff0c;特别是msvcp140.dll文件缺失问题&#xff0c;它会导致某些程序无法运行。针对这一常见问题&#xff0c;本文将详细阐述如何应对和修复msvcp140.dll文件缺失的状况&#xff0c;提供多个解决方案&#xff0c;…

Java多线程-14

目录 程序线程进程 并发并行​编辑 创建线程的基本方式 程序线程进程 并发并行 创建线程的基本方式&#xff08;1&#xff09; package com.edu.threaduse;public class Demo01 {public static void main(String[] args) throws InterruptedException {//创建Cat对象&…

DolphinScheduler实际应用

前言 最近公司新启动了一个项目&#xff0c;然后领导想用一下新技术&#xff0c;并且为公司提供多个大数据调度解决方案&#xff0c;我呢就根据领导要求调研了下当前的开源调度工具&#xff0c;最终决定采用DolphinScheduler&#xff0c; 因此研究了一下DolphinScheduler &…

今日聊聊寒假假期如何不颓废

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

Linux-进程间通信_管道

项目场景&#xff1a; 须熟知文件管理和进程方面的基础知识 通过Xshell和VScode 相互进行远程开发&#xff0c;学习进程间通信的其中一种方式——管道。 问题描述 依照我们曾经所学的知识&#xff0c;我们仅仅只能在单个进程中进行数据的交互&#xff0c;但是在实际应用中&a…

算法第七天-粉刷房子Ⅲ

粉刷房子Ⅲ 题目要求 解题思路 来自[宫水三叶] 动态规划 定义 f[i][j][k] 为开了前i间房子&#xff0c;且第 i 间房子的颜色编号为 j&#xff0c; 前 i 间房子形成的分区数量为 k 的所有方案中的[最小上色成本]。 我们不失一般性的考虑 f[i][j][k] 该如何转移&#xff0c;由…

Sentinel使用

前言&#xff1a; 所有的准备工作都做好了&#xff0c;就可以进入到Sentinel的具体使用上了&#xff0c;这里还需要一个测试工具叫做jmeter&#xff0c;是一个很好的测试工具&#xff0c;专门针对并发的&#xff0c;准备好以后&#xff0c;就可以直接开干了。 一、Sentinel作用…

闲人闲谈PS之五十一——项目物料移动中的2个WBS

惯例闲话&#xff1a;2024年在不知不自觉中已经到来&#xff0c;之前闲人也聊起过2023年是忙碌和收获的一年。今年的任务初步排一下&#xff0c;也基本上排到年底去了&#xff0c;又会是忙碌的一年。虽然忙碌&#xff0c;但是今年对于自己而言&#xff0c;有更加重要的事情要去…

vue3顶部内容固定定位,下面内容可以向上滚动

功能要求&#xff1a;一个div里有两个模块儿&#xff0c;顶部按钮模块儿和下面的内容区域模块儿&#xff0c;顶部按钮模块儿固定在顶部不随滚动条滚动&#xff0c;下面内容区域可以滚动 如图&#xff1a; 思路是&#xff1a; 1、顶部按钮固定定位&#xff0c;会脱离文档流&…

两阶段提交协议三阶段提交协议

两阶段提交协议 分布式事务是指会涉及到操作多个数据库的事务,在分布式系统中&#xff0c;各个节点之间在物理上相互独立&#xff0c;通过网络进行沟通和协调。 XA 就是 X/Open DTP 定义的交易中间件与数据库之间的接口规范&#xff08;即接口函数&#xff09;&#xff0c;交易…