使用CSS动画使HTML元素消失

Question

使用CSS动画使HTML元素消失

javascripthtmlcssanimationcss-animations

15

我想知道有没有一种方法可以使用CSS动画使HTML元素消失。因此，当元素通过某些脚本从页面中移除时，在元素实际被移除之前应该显示动画。

这个是否容易实现？或者我需要为我的脚本设置一个计时器，开始一个持续X时间的动画，并在X时间后移除元素？

- Froxx

请看这里：https://dev59.com/uGUo5IYBdhLWcg3wmQdN。 - Jakob

寻求代码帮助的问题必须在问题本身中包含最短的代码，最好使用 Stack Snippet。请参阅如何创建一个最小、完整和可验证的示例。 - Paulie_D

这将完全取决于您想要实现的效果以及在删除元素后该如何影响其他元素。 - Paulie_D

我添加了一个完美运行的答案，它会以淡出的方式消失，并且显示属性设置为无。 - QApps

@Froxx，我发现自己犯了一个错误，请再看一下这是否达到你想要的效果。 - QApps

6个回答

11

如果脚本实际上是要删除 DOM 元素，我认为没有办法让它渐变消失。我认为定时器是你唯一的选择。

- sean

1

看起来你是对的。嗯，使用超时的方式也不错。我只是想知道是否有一种不需要 JS 更简单的方法。 - Froxx

6

我使用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>

- Tim

5

使用如下代码来实现过渡效果：

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;
}

<div id="thisone" onclick="waithide()"></div>

- QApps

动画确实能工作，但这不是我要求的。我想知道是否有可能在删除元素时播放CSS动画，而不是如何隐藏元素（最终元素仍然存在）。 - Froxx

我知道它能工作... ^^ 但是元素仍然存在于DOM中。这就是我的问题。我想从DOM中删除该元素（而不仅仅是使用display: none隐藏它），并且我想知道是否有一种解决方案可以不用JS的setTimeout()。但我想我会选择使用timeout的方式。 - Froxx

我不明白你想要什么，你是想删除对象的源代码，使用户无法在检查元素时看到它吗？还是说这不会以任何方式影响代码？ - QApps

我有一个脚本，它将数据表中的每个记录显示为一个元素。这个表在运行时被修改，所以DOM（HTML源代码）也会在运行时被修改。当我为数据表的新记录添加一个新元素时，这不是问题，因为CSS的正常animation属性会被触发。但是当元素被删除时，就有点困难了，因为似乎没有集成的监听器。我的问题是是否有我不知道的监听器。但是看起来并不是这样，所以我需要设置一个延迟元素删除的超时。 - Froxx

哦，好的，我现在明白了。 - QApps

3

我认为你需要分两步进行。先进行动画效果，然后在动画完成后移除元素。请参考下面的函数。也许可以将它制作成一个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>

- Darin Cardin

如果该元素可以保留在DOM中，那将是一个不错的解决方案，但事实并非如此。我需要将其移除，但还是谢谢。 - Froxx

@Froxx：“如果元素可以留在DOM中，但它没有”，是真的...“我需要将其删除”，是的，这是在1秒后发生的（当高度动画完成后）。这将做你喜欢的事情，但它涉及设置一个计时器。Buffalo的解决方案没有（至少是JavaScript）计时器，但最终不会删除元素，它仍然存在于DOM中，但不再显示。 - Youp Bernoulli

-1

transition: .5s;

不可见：

opacity: 0;

可见：

opacity: 1;

transition会使得元素平滑地出现和消失。

- fruitloaf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Running Buffalo · Accepted Answer

我会在关键帧上做些花哨的东西

@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;
}