使用CSS动画使HTML元素消失

Make HTML element disappear with CSS animation

本文关键字：元素 消失 HTML CSS 动画 使用      更新时间：2023-09-26

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

这有可能用一种简单的方法吗？或者，我需要为脚本设置一个计时器，以持续时间X开始动画，并在时间X之后删除元素？

我会喜欢关键帧

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

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

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

使用这样的转换：

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>

我认为您必须分两步来完成。首先设置动画。然后，动画制作完成后，移除elem。请参阅下面的功能。也许它可以放在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>

transition: .5s;

不可见：

opacity: 0;

可见：

opacity: 1;

过渡会使它平稳地出现和消失。

相关文章：