获得徽章 0
我重新发一个吧
有一个问题，需要大佬们解释一下。
场景：
显示一个动态日历。数据是组件内部请求回来的。时间接近的时候就会出现重叠。
所以我想在vue渲染出了元素信息以后同步修改dom然后再显示，就和react的useLayoutEffect钩子一样。
放在nextTick里面，会出现元素闪烁问题。![[疑问]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_31.606e7a5.png)
有一个问题，需要大佬们解释一下。
场景：
显示一个动态日历。数据是组件内部请求回来的。时间接近的时候就会出现重叠。
所以我想在vue渲染出了元素信息以后同步修改dom然后再显示，就和react的useLayoutEffect钩子一样。
放在nextTick里面，会出现元素闪烁问题。
![[疑问]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_31.606e7a5.png)
展开
19
1
有一个问题，需要大佬们解释一下。
场景：我用vue渲染出了元素信息，但是部分元素有重叠，这个时候我需要使用js去控制dom偏移，但是在nextTick里面，会出现元素闪烁问题，我想到的是vue有没有钩子提供给我们在插入或者更新元素之前我们可以拿到真实dom自行操作，然后再插入。
场景：我用vue渲染出了元素信息，但是部分元素有重叠，这个时候我需要使用js去控制dom偏移，但是在nextTick里面，会出现元素闪烁问题，我想到的是vue有没有钩子提供给我们在插入或者更新元素之前我们可以拿到真实dom自行操作，然后再插入。
56
点赞
![[衰]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_34.cf5b4d5.png)
![[玫瑰]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_103.6c2eed8.png)
![[大哭]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_60.9016267.png)
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
，这个破班，又不能不上 冬天了，怎么让电脑帮暖手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加热</title>
<style>
*{
margin: 0;
padding: 0;
}
#hot{
transform: translate3d(0px,0px,0px);
opacity: 0.99;
display: inline-block;
}
</style>
</head>
<body>
<div id="hot">用于电脑加热</div>
<script>
let hotHtml = document.getElementById("hot")
let count = 0
let dir = false
setInterval(()=>{
let max = window.innerWidth - hotHtml.offsetWidth
if(count>=max) {
dir=true
} else if(count <= 0) {
dir = false
}
if(dir) {
count--
} else {
count++
}
hotHtml.style.transform = `translate3d(${count}px,0px,0px)`
},0)
</script>
</body>
</html>
请大佬来改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加热</title>
<style>
*{
margin: 0;
padding: 0;
}
#hot{
transform: translate3d(0px,0px,0px);
opacity: 0.99;
display: inline-block;
}
</style>
</head>
<body>
<div id="hot">用于电脑加热</div>
<script>
let hotHtml = document.getElementById("hot")
let count = 0
let dir = false
setInterval(()=>{
let max = window.innerWidth - hotHtml.offsetWidth
if(count>=max) {
dir=true
} else if(count <= 0) {
dir = false
}
if(dir) {
count--
} else {
count++
}
hotHtml.style.transform = `translate3d(${count}px,0px,0px)`
},0)
</script>
</body>
</html>
请大佬来改
展开
1
5
![[思考]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_15.f58c082.png)
，优势很强啊![[惊恐]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_83.bc66012.png)
![[不失礼貌的微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)
赞了这篇文章
