Question

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

这是否可以轻松实现？或者我是否需要为我的脚本设置一个计时器来启动持续时间为X的动画并在时间X之后删除该元素？

Answer 1

我会喜欢关键帧

'???'

Answer 2

如果脚本实际上删除了DOM元素，我不相信有一种方法可以淡化它。我认为计时器是你唯一的选择。

Answer 3

使用这样的转换：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

<img style="page-break-before:always" src="/somepath/Content/images/logo.png" class="visible-print" style="width:200px;height:100px" alt="" />

Answer 5

我使用jQuery来实现它。

＆＃13;

//jQuery
$(document).ready(function() {
  var target = $("#div");
  $("#btn").click(function() {
    removeElement(target);
  });
});

function removeElement(target) {
  target.animate({
    opacity: "-=1"
  }, 1000, function() {
    target.remove();
  });
}

＆＃13;

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

＆＃13;

<!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>

＆＃13;

使用CSS动画使HTML元素消失

5 个答案: