一行代码实现display"过渡动画"原理-低调大师

一行代码实现display"过渡动画"原理

2020-09-07 522

写本文的起因

上篇文章，提到如何让display出现过渡动画，却没有仔细介绍原理。
为了更好的让想学习的人深入理解于是加班加点写下了这篇“短文”，我想以后还是以短文为主，不然大家看起来太累

正式开始

初始化界面


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
          #app {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
            transition: all 1s;
        }
    </style>
</head>

<body>
    <div id="app">
    </div>
    <button id="test">测试</button>
</body>

</html>

此时我将app的display初始化为none,并且写入脚本文件

<style>
        #app {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
    。。。
<script>
     test.onclick = function () {
        const app = document.querySelector('#app')
        console.log(app, 'app')
        app.style.transform = "translateX(200px)"
        app.style.display = "block"
    }
</script>

初始化界面变成了这样:

此时，我点击测试按钮

并没有出现动画，非常生硬的出来了，有一些场景我又要性能，比如初始化不渲染，但是当它出现又要有动画的时候，就有可能使用这行代码


 test.onclick = function () {
        const app = document.querySelector('#app')
        console.log(app, 'app')
        app.style.display = "block"
        const height = app.offsetHeight
        app.style.transform = "translateX(200px)"
    }

当我加入const height = app.offsetHeight这行代码的时候，再点击测试按钮，display切换就顺带出来了“动画”,有了过度效果
为什么会出现动画了呢？因为我读取dom的这些特殊属性时，浏览器就会强制清空渲染队列一次，让我拿到最新的值。也就是说读取的时候，其实已经是display为"block"了，因此。我们出现了过渡动画

效果如下所示：

出现`“过渡动画”`是什么情况？

其实 display是不能出现动画的，所以标题 +了引号
怎么才能有过渡？

有数字的变化，例如透明度，从 0-1.
初始化有渲染展示的
在 transition里面包含的属性
...等大家可以补充

为什么加了一行代码后,就能出现动画了？

大家在写现代前端框架，遇到最多的问题就是渲染的时期不确定的问题。

例如 vue里面的 nextTick实现，有一个优雅降级的实现。它在 mounted生命周期函数里面去获取 dom节点时候，经常获取不到或者获取不到完整渲染的 dom节点。(我很久没有使用 vue了，有问题可以补充)，为什么？
像现在数据驱动的框架，只要数据改变了，对应逻辑绑定了数据的 dom节点按道理应该更新，可是更新时机是我们无法确定的，因为这中间有中间层，比如存在 diff算法计算过程，可能存在队列,因为当你频繁修改数据的时候，框架本身要做优化，合并一段时间的数据更新再去真正更新 dom,等这些事情都做完了，才能去更新 dom节点，然后我们才能看到最新数据对应的节点
当我们真的要去更新 dom节点的时候，也存在一个队列。这个就是 浏览器的渲染队列

如果你无法理解我上面说的，可以看我之前手写 React系列文章中的 setState异步队列实现

浏览器的渲染队列

什么时候最能体现这个队列的作用？

频繁直接操作 dom时候，例如 for循环里面频繁操作 dom，这个时候浏览器就会优化我们的操作，合并一部分操作一次性执行
渲染队列跟 display的关联

<script>
    test.onclick = function () {
        const app = document.querySelector('#app')
        console.log(app, 'app')
        app.style.display = "block"
        const height = app.offsetHeight
        app.style.transform = "translateX(200px)"
    }
</script>

当我们执行了 app.style.display = "block"这行代码时候， dom节点此时并没有更新， js解析引擎是聪明的，它发现你后面马上有代码要修改 dom节点，会先存入队列中集中一次性操作
当我们执行了 app.offsetHeight这行代码时候，发现我们需要读取 dom节点的属性，浏览器害怕现在队列中没有执行的操作会让你读取到不正确的值引发 BUG，于是就会清空渲染队列并且执行，让你拿到最 精确/新的值

当你请求向浏览器请求一些 style信息的时候，就会让浏览器 flush队列，比如：

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
width,height

当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要 flush队列，
因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，
浏览器都会强行刷新渲染队列。

清空渲染队列后

当读取 offsetHeight属性后，我们清空了渲染队列，那么此时 dom重新渲染完成后，此时 display已经是 block了。而且展示在界面上面了，我们再操作 dom属性就会出现过渡动画了。

最后

纸上得来终觉浅，多实践、多思考是走向更高级别必经之路，想要看我之前手写源码文章的，我的gitHub源码地址是:https://github.com/JinJieTan/Peter-,记得Star哦
欢迎你关注我的公众号：[前端巅峰] 如果感觉对你有帮助，可以点个赞/在看，让更多人看到我的这篇文章

本文分享自微信公众号 - 前端巅峰（Java-Script-）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

微信关注我们

原文链接：https://my.oschina.net/u/4594011/blog/4549755

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

领域驱动设计框架Axon实践

背景 2004年，Eric Evans发表了Domain Driven Design（领域驱动设计，DDD)这一著作，并在书中对领域驱动作出了开创性的理论阐述，至今领域驱动设计已问世十几年。近几年来随着微服务盛行， ES(Event Sourcing)事件溯源和CQRS(Command Query Responsibility Segregation)读写分离也成为了一个越来越流行的概念，使用ES和CQRS好处在此不做赘述，但是也存在颇多弊端，比如事件数量巨大、回溯状态需要提前预热、缺少成熟的框架支撑等。在这种情况下，2009年Allard Buijze在JVM平台开源了Axon Framework用来解决此问题，简单说来Axon就是集成了DDD、ES和CQRS于一身，落地实现的一套框架方案，并成立了一家公司Axon IQ，专门与Axon产品合作。爱奇艺号技术团队，在实施微服务化过程中，应用领取驱动思想，采用Axon框架落地了多个服务，下面是实施过程中的经验总结。技术选型爱奇艺号合同中台面向用户提供签约功能，从发起签约到运营审核、供应商、采购单、扫描件、归档等流程漫长，状态颇...

2020-09-04

540

最近一直忙着处理原来老项目遗留的一些SQL优化问题，由于当初表的设计以及字段设计的问题，随着业务的增长，出现了大量的慢SQL，导致MySQL的CPU资源飙升，基于此，给大家简单分享下这些比较使用的易于学习和使用的经验。这次的话简单说下如何防止你的索引失效。再说之前我先根据我最近的经验说下我对索引的看法，我觉得并不是所以的表都需要去建立索引，对于一些业务数据，可能量比较大了，查询数据已经有了一点压力，那么最简单、快速的办法就是建立合适的索引，但是有些业务可能表里就没多少数据，或者表的使用频率非常不高的情况下是没必要必须要去做索引的。就像我们有些表，2年了可能就10来条数据，有索引和没索引性能方面差不多多少。索引只是我们优化业务的一种方式，千万为了为了建索引而去建索引。下面是我此次测试使用的一张表结构以及一些测试数据 CREATETABLE`user`(`id`int(5)unsignedNOTNULLAUTO_INCREMENT,`create_time`datetimeNOTNULL,`name`varchar(5)NOTNULL,`age`tinyint(2)unsigned...

2020-09-06

488

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。