主页 / 问题 / 1077884
Accepted
JuniorDjango
Asked:2020-02-04 00:02:07 +0000 UTC2020-02-04 00:02:07 +0000 UTC

如何在纯JS中使用动画超时后使div消失？

  • 772

如何用纯 JavaScript 编写这段代码？

在其中，自动持续 3 秒div，它传播：

setTimeout( function() {
    $('#message').fadeOut('slow');
    },  3000);

UPD 感谢您的回复！但是我有动画和不透明度将无济于事，因为在它之后它仍然保留在页面上，但一切都应该消失。

javascript

3 个回答

  1. 如果您不需要动画，那么这个解决方案很好

    setTimeout(function() {
  document.querySelector('#message').style.display = 'none';
},  3000);
    #message {
  height: 50px;
  width: 100%;
  background-color: red;
}
    <div id="message"></div>

    • 2
  2. Best Answer

    如果没有动画，那么很简单：

        function Hide(){ // Можно создать функцию скрытия поля, чтобы при необходимости можно было с ней работать в других вызовах
        document.getElementById('message').style.display = "none";
    }
    setTimeout(Hide, 3000); //Ставим таймаут на скрытие
    <div id="message">Пурум Пум Пум</div>

    如果你想要动画，你可以使用opacity，但它只是让它不可见，但它不会像 一样被删除display: none，而是继续占用页面上的空间，只是不可见。

        function Hide(){
        document.getElementById('message').classList.add('slow');
    }
    setTimeout(Hide, 3000);
        .slow {
        opacity: 0;
        transition: 2s;
    }
    <div id="message">Пурум Пум Пум</div>

    为了平滑隐藏，然后消失，您可以组合。

        function Hide1(){ // Можно создать функцию скрытия поля, чтобы при необходимости можно было с ней работать в других вызовах
        document.getElementById('message').style.display = "none";
    }
    function Hide(){
        document.getElementById('message').classList.add('slow');
    }
    setTimeout(Hide, 3000);
    setTimeout(Hide1, 5000); //Исчезает блок через 5 секунд - 3 секунды после загрузки и 2 секунды анимации.
        .slow {
        opacity: 0;
        transition: 2s;
    }
    <div id="message">Пурум Пум Пум</div>

    • 2

  3. 我当然不是超级专家，但在这里

        let test = document.getElementById("test");
setTimeout( function() {
    test.style = 'display: none'
    },  3000);

    https://codepen.io/LordOfTime/pen/zYxgygP

    也可以将样式设置为 opacity: 0，但它会变得不可见，或者设置 height: 0，则不会占用空间。然后不要忘记设置过渡

    • 0

相关问题