gpt4 book ai didi

javascript - webkit - div 上的 css 过渡效果

转载 作者:行者123 更新时间:2023-11-30 13:36:39 24 4
gpt4 key购买 nike

当我更改一个 div 的 innerHTML 时,我试图做淡入/淡出效果。甚至尝试过在 safari doc 给出的例子

我希望 div 淡出,更改内容,然后再次淡入新内容。

<style>
.cv { background-color: #eee; -webkit-transition: all 1s ease-in-out;}
.cf {opacity: 0;}
</style>
<body>
<div id="main">
<div id="c"> OLD </div>
</div>
</body>
<script>
var c = document.getElementById("c");
c.setAttribute("class", "cf");
c.innerHTML = '';
c.appendChild(fragment);
c.setAttribute("class", "cv");
</script>

请帮帮我

最佳答案

<style>
.cv { opacity:1; background-color: #eee; -webkit-transition: all 1s ease-in-out;}
.cv.hide {opacity: 0;}
</style>

[...]

<script>
c.setAttribute("class", "cv hide");
[...]
c.setAttribute("class", "cv");
</script>

关于javascript - webkit - div 上的 css 过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4559634/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com