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

时间 2021-02-14

标签 html 前端 vue git github 算法浏览器前端框架 app 框架栏目 CSS 繁體版

原文原文链接

写本文的原由

上篇文章，提到如何让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
- 例如vue里面的nextTick实现，有一个优雅降级的实现。它在mounted生命周期函数里面去获取dom节点时候，常常获取不到或者获取不到完整渲染的dom节点。(我好久没有使用vue了，有问题能够补充)，为何？
- 像如今数据驱动的框架，只要数据改变了，对应逻辑绑定了数据的dom节点按道理应该更新，但是更新时机是咱们没法肯定的，由于这中间有中间层，好比存在diff算法计算过程，可能存在队列,由于当你频繁修改数据的时候，框架自己要作优化，合并一段时间的数据更新再去真正更新dom,等这些事情都作完了，才能去更新dom节点，而后咱们才能看到最新数据对应的节点
- 当咱们真的要去更新dom节点的时候，也存在一个队列。这个就是浏览器的渲染队列

---git

若是你没法理解我上面说的，能够看我以前手写React系列文章中的setState异步队列实现

浏览器的渲染队列

何时最能体现这个队列的做用？github
- 频繁直接操做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哦

欢迎你关注个人公众号：[前端巅峰] 若是感受对你有帮助，能够点个赞/在看，让更多人看到个人这篇文章

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

写本文的原由

正式开始

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

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

浏览器的渲染队列

清空渲染队列后

最后

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