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. 教育影响 五、…

Vue 3.4 正式版发布,带来多项更新

12 月 28 日,Vue 3.4 正式版发布,代号为“🏀 Slam Dunk”,即灌篮高手。据尤大接收,这个版本进行了许多重要的内部改进,其中最引人瞩目的是重写的模板解析器。新的解析器将速度提高了 2 倍,显著提升了整体性能。 此外,响应性系统也经过了重构,使得 effect 触发更为精…

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.…

SQL BETWEEN 操作符

BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。 SQL BETWEEN 语法 SELECT column1, column2, ... FROM table_name WHERE column BETWEEN value1 AND value2; 参数说明&#xff1a; column1, column2, ...&#xff1a;要选择的字段名…

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

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

LinuxShell

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

Transformer:Attention机制、前馈神经网络、编码器与解码器

主要介绍Transformer的一些工作原理与优势。 文章目录 Transformer中的Attention机制 一、引言 二、Transformer中的Attention机制 1. 背景介绍 2. 工作原理 3. 优势分析 Transformer中的前馈神经网络 一、引言 二、神经网络的基本概念 三、前馈神经网络 四、Transformer中的前…

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;来于“云”的“羽球人”。…

安全防御之身份鉴别技术

身份认证技术用于在计算机网络中确认操作者的身份。在计算机网络世界中&#xff0c;用户的身份信息是用一组特定的数据来表示的&#xff0c;计算机也只能识别用户的数字身份。身份认证技术能够作为系统安全的第一道防线&#xff0c;主要用于确认网络用户的身份&#xff0c;防止…

Linux-进程间通信_管道

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

算法第七天-粉刷房子Ⅲ

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