时间戳

首页 > 解决方案 > 应用动画删除文本

javascript - 应用动画删除文本

问题描述

我已经实现了一个类似导航选项卡的视图。三个按钮，当我们单击一个按钮时，与其他两个按钮对应的文本会被隐藏。但我希望当我们更新文本时，我们必须看到一些动画，比如淡入。

var prevId = 1;
function updateView(id) {
    document.getElementById("subsec"+prevId).style.visibility = "hidden";
    document.getElementById("subsec"+id).style.visibility = "visible";
    prevId = id;
}
<div id="subsec1" >
  Tab 1
</div>
<button onclick="updateView(1)"></button>

<div id="subsec2" style="visibility: hidden">
  Tab 2
</div>
<button onclick="updateView(2)"></button>

<div id="subsec3"  style="visibility: hidden">
  Tab 3
</div>
<button onclick="updateView(3)"></button>

谁能帮我这个。我附上了一个例子，说明我的观点如何。示例：我目前在选项卡 3 上，然后单击选项卡 1，然后选项卡 3 的内容应该消失，但通过动画和选项卡 1 的内容必须仅通过动画出现在屏幕上（如淡入）。

标签： javascripthtmlcsstabscss-animations

解决方案

请从 w3schools.com 阅读此内容。

尝试添加css

.fadeIn {
    animation-name: FadeIn;
    animation-duration: 4s;
    animation-fill-mode: both;
}

.fadeOut {
    animation-name: FadeOut;
    animation-duration: 4s;
    animation-fill-mode: both;
}

@keyframes FadeIn {
    from { opacity: 0%; }
    to { opacity: 100%; }
}

@keyframes FadeOut {
    from { opacity: 100%; }
    to { opacity: 0%; }
}

然后像这样添加javascript：

var prevId = 1;
function updateView(id) {
    document.getElementById("subsec"+prevId).className = "fadeOut";
    document.getElementById("subsec"+id).className = "fadeIn";
    preId = id;
}

将可见性：在 html 中替换为不透明度：0%，如果您希望它们在开头有动画，请在开头设置类。

这不是优化的。

推荐阅读