当前位置:首页 > 科技  > 软件

快速了解 CSS @starting-style 规则

来源: 责编: 时间:2023-11-20 17:12:19 176观看
导读一、快速了解 @starting-style通常做一个动画效果,你可能会考虑 transition 和 animation。相对于animation,transition使用更简单,但是有一定条件,需要有状态的改变,例如手动添加一个class。div{ transform: scale(0)}di

Z3h28资讯网——每日最新资讯28at.com

一、快速了解 @starting-style

通常做一个动画效果,你可能会考虑 transition 和 animation。Z3h28资讯网——每日最新资讯28at.com

相对于animation,transition使用更简单,但是有一定条件,需要有状态的改变,例如手动添加一个class。Z3h28资讯网——每日最新资讯28at.com

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

示意如下:Z3h28资讯网——每日最新资讯28at.com

Z3h28资讯网——每日最新资讯28at.com

但是,如果这个show是一开始就存在的,比如:Z3h28资讯网——每日最新资讯28at.com

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

这样在页面打开的时候,肯定也是没有过渡效果的,因为没有状态的变化。Z3h28资讯网——每日最新资讯28at.com

在以前,我们可以换成用animation的方式,这样即使是一开始存在的,也能有动画效果,因为animation是可以自动运行的。Z3h28资讯网——每日最新资讯28at.com

不过到了现在,我们可以用transition的方式来实现了,将上面的例子改写一下。Z3h28资讯网——每日最新资讯28at.com

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

这里的@starting-style表示初始样式,相当于在渲染之前就有了一个初始状态,这样也就算有状态变化了。Z3h28资讯网——每日最新资讯28at.com

Z3h28资讯网——每日最新资讯28at.com

实际效果如下(每次刷新浏览器都有放大动画)。Z3h28资讯网——每日最新资讯28at.com

Z3h28资讯网——每日最新资讯28at.com

这样,即使不手动添加状态也能触发过渡动效了,这就是@starting-style。Z3h28资讯网——每日最新资讯28at.com

二、元素添加时添加过渡

有时候,即使是手动添加class,也无法保证一定能触发过渡动效,比如新创建的元素。Z3h28资讯网——每日最新资讯28at.com

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

这种情况下,transition就失效了,因为你在添加class的时候元素还未完全渲染。Z3h28资讯网——每日最新资讯28at.com

要解决这个问题,之前也有几种方式。Z3h28资讯网——每日最新资讯28at.com

首先是定时器,添加一点点延时。Z3h28资讯网——每日最新资讯28at.com

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

还有一种方式,主动触发元素的渲染,强制重绘。Z3h28资讯网——每日最新资讯28at.com

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

另外,还可以用动画animation来代替,这样也能主动触发动画。Z3h28资讯网——每日最新资讯28at.com

.show{  animation: ...}

现在,使用@starting-style也能实现这样的效果。Z3h28资讯网——每日最新资讯28at.com

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

下面是一个元素出现过渡效果:Z3h28资讯网——每日最新资讯28at.com

Z3h28资讯网——每日最新资讯28at.com

你也可以访问以下链接查看实际效果(Chrome 117+)Z3h28资讯网——每日最新资讯28at.com

  • CSS @style-rule (juejin.cn)[1]
  • CSS @style-rule (codepen.io)[2]

这让我想起了之前做过一个message效果,实现原理是这样的,如果页面上还没有 message元素,就先创建,然后添加show类名,让这个元素出现,这里就是通过强制触发重绘实现的。Z3h28资讯网——每日最新资讯28at.com

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)}

效果如下,第一次创建的时候也有过渡效果:Z3h28资讯网——每日最新资讯28at.com

Z3h28资讯网——每日最新资讯28at.com

有兴趣的可以回顾之前这篇4年前的文章:css3元素出现动画实例 。Z3h28资讯网——每日最新资讯28at.com

三、让 display:none 也支持过渡

大家可能知道,当一个元素从display:none变成display:block时,是无法触发过渡效果的,即便有一些过渡属性。Z3h28资讯网——每日最新资讯28at.com

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

像这种情况下没有过渡效果的,如下:Z3h28资讯网——每日最新资讯28at.com

Z3h28资讯网——每日最新资讯28at.com

不过,现在有了@starting-style,也能轻易实现过渡效果,不管你有没有display:none。Z3h28资讯网——每日最新资讯28at.com

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

效果如下:Z3h28资讯网——每日最新资讯28at.com

Z3h28资讯网——每日最新资讯28at.com

遗憾的是,从display:block变为display:none是无法触发过渡效果的。Z3h28资讯网——每日最新资讯28at.com

另外,原生组件很多的隐藏和显示都是直接通过display:none实现的,例如dialog,可以直接添加@starting-style规则来实现打开动画,而无需改变默认 display。Z3h28资讯网——每日最新资讯28at.com

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

效果如下:Z3h28资讯网——每日最新资讯28at.com

Z3h28资讯网——每日最新资讯28at.com

你也可以访问以下链接查看实际效果(Chrome 117+)Z3h28资讯网——每日最新资讯28at.com

  • CSS @style-rule display (juejin.cn)[3]
  • CSS @style-rule display (codepen.io)[4]

四、总结一下

一个可以改变元素初始状态的新特性,你学到了吗?Z3h28资讯网——每日最新资讯28at.com

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

不过像这样的 CSS 特性注定是冷门属性,主要是可替代性太强了,而且不知道什么时候才可以正式投入使用,现在就当提前了解吧。Z3h28资讯网——每日最新资讯28at.com

[0]css3元素出现动画实例: https://segmentfault.com/a/1190000018889396。Z3h28资讯网——每日最新资讯28at.com

[1]CSS @style-rule (juejin.cn): https://code.juejin.cn/pen/7299436237318799423。Z3h28资讯网——每日最新资讯28at.com

[2]CSS @style-rule (codepen.io): https://codepen.io/xboxyan/pen/ZEwKYpR。Z3h28资讯网——每日最新资讯28at.com

[3]CSS @style-rule display (juejin.cn): https://code.juejin.cn/pen/7299479246152400896。Z3h28资讯网——每日最新资讯28at.com

[4]CSS @style-rule display (codepen.io): https://code.juejin.cn/pen/7299479246152400896。Z3h28资讯网——每日最新资讯28at.com

本文链接:http://www.28at.com/showinfo-26-31550-0.html快速了解 CSS @starting-style 规则

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: C++中的内联函数:提高程序效率

下一篇: RabbitMQ工作模式-Routing路由模式

标签:
  • 热门焦点
  • Find N3入网:最高支持16+1TB

    Find N3入网:最高支持16+1TB

    OPPO将于近期登场的Find N3折叠屏目前已经正式入网,型号为PHN110。本次Find N3在外观方面相比前两代有很大的变化,不再是小号的横向折叠屏,而是跟别的厂商一样采用了较为常见的
  • K60至尊版刚预热 一加Ace2 Pro正面硬刚

    K60至尊版刚预热 一加Ace2 Pro正面硬刚

    Redmi这边刚如火如荼的宣传了K60 Ultra的各种技术和硬件配置,作为竞品的一加也坐不住了。一加中国区总裁李杰发布了两条微博,表示在自家的一加Ace2上早就已经采用了和PixelWo
  • 6月安卓手机好评榜:魅族20 Pro蝉联冠军

    6月安卓手机好评榜:魅族20 Pro蝉联冠军

    性能榜和性价比榜之后,我们来看最后的安卓手机好评榜,数据来源安兔兔评测,收集时间2023年6月1日至6月30日,仅限国内市场。第一名:魅族20 Pro好评率:95%5月份的时候魅族20 Pro就是
  • 5月iOS设备性能榜:M1 M2依旧是榜单前五

    5月iOS设备性能榜:M1 M2依旧是榜单前五

    和上个月一样,没有新品发布的iOS设备性能榜的上榜设备并没有什么更替,仅仅只有跑分变化而产生的排名变动,刚刚开始的苹果WWDC2023,推出的产品也依旧是新款Mac Pro、新款Mac Stu
  • 企业采用CRM系统的11个好处

    企业采用CRM系统的11个好处

    客户关系管理(CRM)软件可以为企业提供很多的好处,从客户保留到提高生产力。  CRM软件用于企业收集客户互动,以改善客户体验和满意度。  CRM软件市场规模如今超过580
  • 一篇文章带你了解 CSS 属性选择器

    一篇文章带你了解 CSS 属性选择器

    属性选择器对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。一、了解属性选择器CSS属性选择器提供了一种简单而
  • 使用LLM插件从命令行访问Llama 2

    使用LLM插件从命令行访问Llama 2

    最近的一个大新闻是Meta AI推出了新的开源授权的大型语言模型Llama 2。这是一项非常重要的进展:Llama 2可免费用于研究和商业用途。(几小时前,swyy发现它已从LLaMA 2更名为Lla
  • JVM优化:实战OutOfMemoryError异常

    JVM优化:实战OutOfMemoryError异常

    一、Java堆溢出堆内存中主要存放对象、数组等,只要不断地创建这些对象,并且保证 GC Roots 到对象之间有可达路径来避免垃 圾收集回收机制清除这些对象,当这些对象所占空间超过
  • 使用AIGC工具提升安全工作效率

    使用AIGC工具提升安全工作效率

    在日常工作中,安全人员可能会涉及各种各样的安全任务,包括但不限于:开发某些安全工具的插件,满足自己特定的安全需求;自定义github搜索工具,快速查找所需的安全资料、漏洞poc、exp
Top