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

写本文的原由

上篇文章，提到如何让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"了，所以。咱们出现了过渡动画

效果以下所示：html

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

其实 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哦前端
欢迎你关注个人公众号：[前端巅峰] 若是感受对你有帮助，能够点个赞/在看，让更多人看到个人这篇文章vue

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

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

写本文的原由

正式开始

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

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

浏览器的渲染队列

清空渲染队列后

最后

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