Fro*_*oxx 2 html javascript css animation css-animations
我想知道是否有一种方法可以使HTML元素随CSS动画一起消失。因此，当某个脚本将元素从页面中删除时，将在该元素实际被删除之前显示一个动画。
这有可能简单吗？还是我需要为我的脚本设置一个计时器，以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;
}
我使用 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>