使用 CSS 动画使 HTML 元素消失答案

【问题标题】：Make HTML element disappear with CSS animation使用 CSS 动画使 HTML 元素消失
【发布时间】：2017-01-23 15:11:43
【问题描述】：

我想知道是否有办法通过 CSS 动画使 HTML 元素消失。因此，当元素被某个脚本从页面中删除时，动画会在元素实际被删除之前显示。

这可以通过简单的方式实现吗？或者我是否需要为我的脚本设置一个计时器，以 X 的持续时间启动动画并在 X 时间之后移除元素？

【问题讨论】：

这可以帮助stackoverflow.com/questions/15907079/…
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
这将完全取决于您要实现的效果以及移除元素后应该如何影响其他元素。
我添加了一个完美的答案，它随着淡入淡出而消失，并且显示属性设置为无
@Froxx 我发现我有一个错误，再看看这是否符合你的要求

标签： javascript html css animation css-animations

【解决方案1】：

transition: .5s;

隐形：

opacity: 0;

可见：

opacity: 1;

过渡会使其平滑地出现和消失。

【讨论】：

【解决方案2】：

我认为您必须分两步完成。首先是动画。然后，在动画完成后，移除元素。请参阅下面的功能。也许它可以放在一个 jquery 插件中？

<style>
    #test{
        background: red;
        height: 100px;
        width: 400px;
        transition: height 1s;   
    }

    #test.hide {
        height: 0;       
    }

</style>

<div id="test"> </div>

<button>Hide the Div</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>


        $('button').click(function(){
            removeWithAnimate('#test');
        });


        function removeWithAnimate(id){
            $(id).addClass('hide');
            setTimeout( function(){
                    $(id).remove()
            },1000);;   
        }

</script>

$('button').click(function() {
  removeWithAnimate('#test');
});

function removeWithAnimate(id) {
  $(id).addClass('hide');
  setTimeout(function() {
    $(id).remove()
  }, 1000);;
}

#test {
  background: red;
  height: 100px;
  width: 400px;
  transition: height 1s;
}

#test.hide {
  height: 0;
}

<div id="test"> </div>

<button>Hide the Div</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

【讨论】：

如果元素可以保留在 DOM 中，那将是一个不错的解决方案，但事实并非如此。我需要删除它，但谢谢。
@Froxx：“如果元素可以保留在 DOM 中，但它没有”是真的......“我需要删除它”是的，这是 1 秒后发生的事情（当动画高度完成）。这将做你喜欢的事情，但它需要设置一个计时器。 Buffalo 的解决方案没有（至少是 javascript）计时器，但最终没有删除元素，它驻留在 DOM 中但不再显示。

【解决方案3】：

我会喜欢关键帧

@keyframes myAnimation{
  0%{
    opacity: 1;
    transform: rotateX(90deg);
  }
  50%{
    opacity: 0.5;
    transform: rotateX(0deg);
  }
  100%{
    display: none;
    opacity: 0;
    transform: rotateX(90deg);
  }
}

#myelement{
    animation-name: myAnimation;
    animation-duration: 2000ms;
    animation-fill-mode: forwards;
}

【讨论】：

显示：动画结尾的 none 不起作用（这些天？！），我现在在 Chrome 中尝试这个，没有“运气”。
查看相关问题：stackoverflow.com/questions/46575220/…

【解决方案4】：

使用这样的过渡：

function waithide()
{
  var obj = document.getElementById("thisone");
  obj.style.opacity = '0';
  window.setTimeout(
    function removethis()
    {
      obj.style.display='none';
    }, 300);
}

div
{
  height:100px;
  width :100px;
  background:red;
  display:block;
  opacity:1;
  transition : all .3s;
  -wekit-transition : all .3s;
  -moz-transition : all .3s;
}

&lt;div id="thisone" onclick="waithide()"&gt;&lt;/div&gt;

【讨论】：

嗯，动画确实有效，但这不是我要求的。我问是否可以在删除元素时播放 CSS 动画 - 而不是如何隐藏元素（最终仍然存在）。
我知道它可以工作... ^^ 但是元素最后仍然在 DOM 中。那是我的问题。我想从 DOM 中删除元素（而不是简单地用display: none 隐藏它），我想知道是否有没有 JS 的setTimeout() 的解决方案。但我想我会选择超时方式。
我没有得到你想要的，你想删除对象的源代码，就像用户在检查元素时看不到它一样吗？或者只是它不影响代码？
我有一个脚本，可以将数据表中的每条记录显示为一个元素。该表在运行时被修改，因此 DOM（HTML 源代码）也在运行时被修改。当我为数据表的新记录添加新元素时，这没问题，因为 CSS 的正常 animation 属性被触发。但是当元素被移除时，它会有点困难，因为似乎没有集成的监听器。我的问题是是否有一个我不知道的。但是好像不是这样的所以我需要设置一个超时来延迟元素的删除。
哦，好的，我现在明白了

【解决方案5】：

我使用 jQuery 来实现这个。

//jQuery
$(document).ready(function() {
  var target = $("#div");
  $("#btn").click(function() {
    removeElement(target);
  });
});

function removeElement(target) {
  target.animate({
    opacity: "-=1"
  }, 1000, function() {
    target.remove();
  });
}

div {
  width: 100px;
  height: 100px;
  background-color: #000;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
  <div id="div"></div>
  <input type="button" value="fadeout" id="btn">
</body>

</html>

【讨论】：

【解决方案6】：

如果脚本实际上是在删除 DOM 元素，我认为没有办法将其淡出。我认为计时器是您唯一的选择。

【讨论】：

看来你是对的。好吧，无论如何，超时的方式并没有那么糟糕。我只是想知道没有 JS 是否有更简单的方法。