悄悄上线:CSS @starting-style 新规则

最近 Chrome 117,CSS 又悄悄推出了一个新的的@规则,叫做@starting-style。从名称上来看,表示定义初始样式。那么,具体是做什么的?有什么用?一起了解一下吧

一、快速了解 @starting-style

通常做一个动画效果,你可能会考虑 transition 和 animation

相对于animationtransition使用更简单,但是有一定条件,需要有状态的改变,例如手动添加一个class

div{
  transform: scale(0)
}
div.show{
  transform: scale(1)
}

示意如下

image.png

但是,如果这个show是一开始就存在的,比如

<div class="show">
  
</div>

这样在页面打开的时候,肯定也是没有过渡效果的,因为没有状态的变化。

在以前,我们可以换成用animation的方式,这样即使是一开始存在的,也能有动画效果,因为animation是可以自动运行的。

不过到了现在,我们可以用transition的方式来实现了,将上面的例子改写一下

div{
  transform: scale(1);
  transition: 1s;
}
@starting-style {
  div{
    transform: scale(0);
  }  
}

这里的@starting-style表示初始样式,相当于在渲染之前就有了一个初始状态,这样也就算有状态变化了

image.png

实际效果如下(每次刷新浏览器都有放大动画)

Kapture 2023-11-08 at 23.02.24.gif

这样,即使不手动添加状态也能触发过渡动效了,这就是@starting-style

二、元素添加时添加过渡

有时候,即使是手动添加class,也无法保证一定能触发过渡动效,比如新创建的元素

const div = document.createElement('div')
div.className = 'show' //过渡无效,直接就生效了
document.body.append(div)

这种情况下,transition就失效了,因为你在添加class的时候元素还未完全渲染。

要解决这个问题,之前也有几种方式

首先是定时器,添加一点点延时

settimeout(()=>{
  div.className = 'show'
},50)

还有一种方式,主动触发元素的渲染,强制重绘

div.clientWidth // 强制触发重绘
div.className = 'show'

另外,还可以用动画animation来代替,这样也能主动触发动画

.show{
  animation: ...
}

现在,使用@starting-style也能实现这样的效果

div.show{
  transition: 1s;
}
@starting-style {
  div{
    transform: scale(0);
  }  
}

下面是一个元素出现过渡效果

Kapture 2023-11-09 at 20.17.31.gif


你也可以访问以下链接查看实际效果(Chrome 117+)

  • CSS @style-rule (codepen.io)')点击预览

这让我想起了之前做过一个message效果,实现原理是这样的,如果页面上还没有 message元素,就先创建,然后添加show类名,让这个元素出现,这里就是通过强制触发重绘实现的

function showMessage(txt){
    this.timer && clearTimeout(this.timer);
    var oDiv = document.getElementById('messageInfo');
    if(!oDiv){
      oDiv = document.createElement('div');
      oDiv.className = 'messageInfo';
      oDiv.id = 'messageInfo';
      document.body.appendChild(oDiv);
    }
    oDiv.innerHTML = '<span>'+txt+'</span>';
      div.clientWidth; // 强制触发重绘
    oDiv.classList.add('show');
    this.timer = setTimeout(function(){
      oDiv.classList.remove('show');
    },2000)
}

效果如下,第一次创建的时候也有过渡效果

Kapture 2023-11-09 at 20.52.10.gif

有兴趣的可以回顾之前这篇4年前的文章:css3元素出现动画实例

三、让 display:none 也支持过渡

大家可能知道,当一个元素从display:none变成display:block时,是无法触发过渡效果的,即便有一些过渡属性

div{
  display: none;
  transition: 1s;
  transform: scale(0)
}
div.show{
  display: block;
  transform: scale(1)
}

像这种情况下没有过渡效果的,如下

Kapture 2023-11-09 at 22.49.54.gif

不过,现在有了@starting-style,也能轻易实现过渡效果,不管你有没有display:none

/*仅需添加一个初始状态*/
@starting-style {
  div{
    transform: scale(0);
  }  
}

效果如下

Kapture 2023-11-09 at 22.55.33.gif

遗憾的是,从display:block变为display:none是无法触发过渡效果的

另外,原生组件很多的隐藏和显示都是直接通过display:none实现的,例如dialog,可以直接添加@starting-style规则来实现打开动画,而无需改变默认 display

dialog{
  transition: 1s;
}
@starting-style {
  dialog{
    transform: scale(0);
  }  
}

效果如下

Kapture 2023-11-09 at 23.04.11.gif

你也可以访问以下链接查看实际效果(Chrome 117+)

  • CSS @style-rule display (codepen.io)')

四、总结一下

一个可以改变元素初始状态的新特性,你学到了吗?

  1. transition 需要有状态的改变才能触发过渡效果
  2. animation 无需状态改变,因为可以自动运行
  3. @starting-style 可以改变元素的初始状态,让元素在初次渲染时也有过渡效果
  4. @starting-style 可以在元素添加时直接添加过渡效果
  5. @starting-style 可以让 display:none 也支持过渡

不过像这样的 CSS 特性注定是冷门属性,主要是可替代性太强了,而且不知道什么时候才可以正式投入使用,现在就当提前了解吧。最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发 ❤❤❤

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue3引入vuex基础

一&#xff1a;前言 使用 vuex 可以方便我们对数据的统一化管理&#xff0c;便于各组件间数据的传递&#xff0c;定义一个全局对象&#xff0c;在多组件之间进行维护更新。因此&#xff0c;vuex 是在项目开发中很重要的一个部分。接下来让我们一起来看看如何使用 vuex 吧&#…

OpenLayers入门,OpenLayers6的WebGLPointsLayer图层样式和运算符详解,四种symbolType类型案例

专栏目录: OpenLayers入门教程汇总目录 前言 本章讲解使用OpenLayers6的WebGL图层显示大量点情况下,列举出所有WebGLPointsLayer图层所支持的所有样式运算符大全。 补充说明 本篇主要介绍OpenLayers6.x版本的webgl图层,OpenLayers7.x和OpenLayers8.x主要更新内容就是webgl…

任意文件下载漏洞(CVE-2021-44983)

简介 CVE-2021-44983是Taocms内容管理系统中的一个安全漏洞&#xff0c;可以追溯到版本3.0.1。该漏洞主要源于在登录后台后&#xff0c;文件管理栏存在任意文件下载漏洞。简言之&#xff0c;这个漏洞可能让攻击者通过特定的请求下载系统中的任意文件&#xff0c;包括但不限于敏…

单链表相关面试题--5.合并有序链表

5.合并有序链表 21. 合并两个有序链表 - 力扣&#xff08;LeetCode&#xff09; /* 解题思路&#xff1a; 此题可以先创建一个空链表&#xff0c;然后依次从两个有序链表中选取最小的进行尾插操作进行合并。 */ typedef struct ListNode Node; struct ListNode* mergeTwoList…

C++ Boost 实现异步端口扫描器

端口扫描是一种用于识别目标系统上哪些网络端口处于开放、关闭或监听状态的网络活动。在计算机网络中&#xff0c;端口是一个虚拟的通信端点&#xff0c;用于在计算机之间传输数据。每个端口都关联着特定类型的网络服务或应用程序。端口扫描通常是网络管理员、安全专业人员用来…

PyTorch微调终极指南1:预训练模型调整

如今&#xff0c;在训练深度学习模型时&#xff0c;通过根据自己的数据微调预训练模型来进行迁移学习&#xff08;transfer learning&#xff09;已成为首选方法。 通过微调这些模型&#xff0c;我们可以利用他们的专业知识并使它们适应我们的特定任务&#xff0c;从而节省宝贵…

uniapp - 开关按钮

目录 1.运行代码如下&#xff1a; 2.运行效果 3.switch属性 1.运行代码如下&#xff1a; <template><view class"switchBox"><switch change"switchChange" color"#F21177" :checked"form.checked" /></view&…

Python简直是万能的,这5大主要用途你一定要知道!

从2015开始国内就开始慢慢接触Python了&#xff0c;从16年开始Python就已经在国内的热度更高了&#xff0c;目前也可以算的上"全民Python"了。 众所周知小学生的教材里面已经有Python了&#xff0c;国家二级计算机证也需要学习Python了&#xff01; 因为Python简单…

消息中间件——RabbitMQ(四)命令行与管控台的基本操作!

前言 在前面的文章中我们介绍过RabbitMQ的搭建&#xff1a;RabbitMQ的安装过以及各大主流消息中间件的对比&#xff1a;&#xff0c;本章就主要来介绍下我们之前安装的管控台是如何使用以及如何通过命令行进行操作。 1. 命令行操作 1.1 基础服务的命令操作 rabbitmqctl sto…

2023年中国高压驱动芯片分类、市场规模及发展趋势分析[图]

高压驱动芯片是一种能在高压环境下工作的集成电路&#xff0c;主要用于控制和驱动各种功率器件&#xff0c;如继电器、电磁阀、电机、变频器等。高压驱动芯片根据其输出电流的大小和形式可分为两类恒流型和开关型。 高压驱动芯片分类 资料来源&#xff1a;共研产业咨询&#x…

Windows系统如何安装与使用TortoiseSVN客户端,并实现在公网访问本地SVN服务器

文章目录 前言1. TortoiseSVN 客户端下载安装2. 创建检出文件夹3. 创建与提交文件4. 公网访问测试 前言 TortoiseSVN是一个开源的版本控制系统&#xff0c;它与Apache Subversion&#xff08;SVN&#xff09;集成在一起&#xff0c;提供了一个用户友好的界面&#xff0c;方便用…

深入了解ECharts

文章目录 导言一、什么是ECharts&#xff1f;二、基本概念1.ECharts实例2.数据系列&#xff08;Series&#xff09;3.坐标轴&#xff08;Axis&#xff09; 三、基本图表类型1.折线图2.柱状图3.饼图 高级功能1.题定制2.事件交互3.地图可视化 总结我是将军&#xff0c;我一直都在…

埃尔米特插值(hermite 插值) C++

埃尔米特插值 原理 #pragma once #include <vector> #include <functional> /*埃尔米特插值*/ struct InterpolationPoint {double x; // 插值点的横坐标double y; // 插值点的纵坐标double derivative; // 插值点的导数值// 默认构造函数InterpolationPoint() : x…

SpringBoot项目启动后自动停止了?

1 现象 2023-11-22T09:05:13.36108:00 DEBUG 17521 --- [ main] o.s.b.a.ApplicationAvailabilityBean : Application availability state LivenessState changed to CORRECT 2023-11-22T09:05:13.36208:00 DEBUG 17521 --- [ main] o.s.b.a.Applicat…

D-Wave推出新开源及解决无线信道解码新方案!

​&#xff08;图片来源&#xff1a;网络&#xff09; 加拿大量子计算机公司D-Wave&#xff08;纽约证券交易所股票代码&#xff1a;QBTS&#xff09;是量子计算系统、软件和服务领域的佼佼者&#xff0c;也是全球首家商业量子计算机供应商。 近期&#xff0c;该公司发布了一…

数据库实验一 数据表的创建与修改管理

数据库实验一、数据表的创建与修改管理实验 一、实验目的二、设计性实验三、观察与思考 一、实验目的 (1) 掌握表的基础知识。 (2) 掌握使用SQL语句创建表的方法。 (3) 掌握表的修改、查看、删除等基本操作方法。 (4) 掌握表中完整性约束的定义。 (5) 掌握完整性约束的作用 二…

腾讯云轻量数据库开箱测评,1核1G轻量数据库测试

腾讯云轻量数据库1核1G开箱测评&#xff0c;轻量数据库服务采用腾讯云自研的新一代云原生数据库TDSQL-C&#xff0c;轻量数据库兼100%兼容MySQL数据库&#xff0c;实现超百万级 QPS 的高吞吐&#xff0c;128TB海量分布式智能存储&#xff0c;虽然轻量数据库为单节点架构&#x…

外贸自建站的指南?新手如何玩转海洋建站?

外贸自建站工具有哪些&#xff1f;外贸新手怎么搭建独立网站&#xff1f; 拥有自己的外贸网站是提高企业国际竞争力和扩大市场份额的有效途径。然而&#xff0c;许多企业在外贸自建站的过程中感到困惑。海洋建站将为您提供一份详细的外贸自建站指南&#xff0c;助您轻松打造一…

时序预测 | MATLAB实现基于ELM-AdaBoost极限学习机结合AdaBoost时间序列预测

时序预测 | MATLAB实现基于ELM-AdaBoost极限学习机结合AdaBoost时间序列预测 目录 时序预测 | MATLAB实现基于ELM-AdaBoost极限学习机结合AdaBoost时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab实现ELM-Adaboost时间序列预测&#xff0c;极…

RFID电网资产全寿命周期管理解决方案

一、方案背景 随着电网公司对电网资产全寿命周期管理的要求日益明确&#xff0c;许多电网公司已经开始积极推进存量资产PMS、PM与AM数据的联动对应&#xff0c;并将联动成果纳入资产全寿命周期管理一体化平台进行指标考核。然而&#xff0c;由于资产变动导致数据质量下降的问题…