使HTML元素消失与CSS动画

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

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

2016-09-15 Froxx

这将有助于http://stackoverflow.com/questions/15907079/css3-transition-fade-out-effect – jakob

问题寻求帮助的代码必须包括必要的重现它最短的代码**在问题本身**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ ）。请参阅[**如何创建一个最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

这完全取决于您要做什么以及如何去除元素应该在移除后影响其他元素。 –

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

来源

2016-09-15 14:30:53 sean

看起来你是对的。那么，超时的方式并不是那么糟糕。我只是想知道没有JS的情况下是否有更简单的方法。 – Froxx

使用的过渡是这样的：

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>

来源

2016-09-15 14:31:47 QApps

这应该工作 – QApps

那么，动画确实有效，但那不是我要求的。我问是否可以在删除元素时播放CSS动画 - 而不是如何隐藏元素（最后仍然存在）。 – Froxx

@Froxx这绝对是伟大的工作尝试 – QApps

我认为你必须做的两个步骤。首先是动画。然后，在动画完成后，移除元素。请参阅下面的功能。也许它可以放在一个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>

来源

2016-09-15 14:35:58

这将是一个很好的解决方案，如果元素可以留在DOM中，但它不会。我需要删除它，但谢谢。 – Froxx

我会得到看中的关键帧

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

}

来源

2016-09-15 14:41:01 Buffalo

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

来源

2016-09-15 15:32:21 Tim

使HTML元素消失与CSS动画

回答

相关问题