<!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>
<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)"
}
效果如下所示:
“过渡动画”
是什么情况?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
属性就会出现过渡动画了。https://github.com/JinJieTan/Peter-
,记得Star
哦