Luc*_*cas 6 javascript jquery css-transitions css-animations animate.css
编辑:所以现在它不是随机的,它看起来总是无法从.css()方法执行(没有进行任何更改).仍然没有得到我可能犯的错误.
我试图用jQuery和animate.css动画删除div.
问题是这个动画依赖的字面上随机执行的事件和操作.
此代码运行以响应处理程序click内的a .on("click"...:
$('section').on('click', 'button', function() {
// Remove the selected card
$(this).closest('.mdl-card')
.addClass('animated zoomOut')
.one('animationend', function() {
empty_space = $('<div id="empty-space"></div>');
empty_space.css('height', ($(this).outerHeight(true)));
$(this).replaceWith(empty_space);
});
// everything is okay until now
// setTimeOut() doesn't always execute
setTimeout(function() {
console.log("test1");
// the following doesn't always happen...
$('#empty-space')
.css({
'height': '0',
'transition': 'height .3s'
// transitionend doesn't always fire either
})
.one('transitionend', function() {
$('#empty-space').remove();
console.log("test2");
});
}, 300);
// Upgrade the DOM for MDL
componentHandler.upgradeDom();
});/* Animate.css customization */
.animated {
animation-duration: .3s
}<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />
</head>
<body>
<section>
<div class="mdl-card">
<button class="mdl-button mdl-js-button">Close</button>
</div>
<p>
Content to test the height of the div above
</p>
</section>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>根据页面加载,没有任何反应,有时只有第一个日志,有时只进入CSS过渡,有时它完成.
在Firefox和Chromium上测试过.
我可能误解了一些东西,因为它看起来很奇怪.
即使您setTimeout为动画提供了相同的持续时间值，但实际上并不能保证它们的回调的执行顺序。简单的原因如下：
JS 本质上是单线程的，这意味着它一次只能执行一件事情。它有一个事件循环，其中有一堆事件队列，所有事件队列都接受诸如网络请求、dom 事件、动画事件等的回调，并且在所有这些事件中，一次仅运行一个并运行到结束（运行到完成）语义）。由于这种单线程性，进一步的复杂性是，重绘和垃圾收集之类的事情也可能在此线程上运行，因此可能会发生额外的不可预测的延迟。
有用的资源：
这意味着，尽管您将空元素的高度过渡延迟到缩小父元素之后，但由于上述因素，无法始终保证此延迟的持续时间。setTimeout因此，当调用其中的回调时，空元素可能不存在。
如果将延迟增加到更大的值，空元素的高度动画实际上会更频繁地发生，因为这会增加动画结束和开始内的代码setTimeout之间的间隙，这意味着空元素很可能位于在我们开始转换 DOM 的高度之前。zoomOutsetTimeout
然而，并没有真正有保证的方法来确定此延迟的最小值，因为每次它都可能不同。
您必须做的是以这样一种方式编写代码，即animationend和setTimeout回调的执行顺序无关紧要。
解决方案
首先，您不需要额外的空白空间，您可以zoomOut在同一元素上执行动画和高度过渡。
您必须注意的一件事是，您正在使用的 css 库已经设置min-height为.mdl-card某个值 ( 200px)，因此您必须在此属性上进行转换，因为元素的高度可能小于该值。您还希望对其height本身进行转换，以便可以删除该元素而不会出现任何卡顿。最后，您必须在动画和过渡完成后延迟删除元素。
这是一个可行的解决方案：
$('section').on('click', 'button', function() {
var isAnimationDone = false,
isTransitionDone = false;
var $item = $(this).closest('.mdl-card');
$item
.addClass('animated zoomOut')
.one('animationend', function() {
isAnimationDone = true;
onAllDone();
});
$item
.css({
height: 0,
'min-height': 0
})
.one('transitionend', function() {
isTransitionDone = true;
onAllDone();
});
function onAllDone() {
if (isAnimationDone && isTransitionDone) {
$item.remove();
}
}
});.animated {
animation-duration: 300ms
}
.mdl-card {
transition: min-height 300ms, height 300ms;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<section>
<div class="mdl-card">
<button class="mdl-button mdl-js-button">Close</button>
</div>
<p>
Content to test the height of the div above
</p>
</section>有了 Promise，这变得更容易一些：
function animate($item, animClass) {
return new Promise((resolve) => {
$item.addClass(`animated ${animClass}`).one('animationend', resolve);
});
}
function transition($item, props) {
return new Promise((resolve) => {
$item.css(props).one('transitionend', resolve);
});
}
$('section').on('click', 'button', function() {
const $item = $(this).closest('.mdl-card');
// start animation and transition simultaneously
const zoomInAnimation = animate($item, 'zoomOut');
const heightTransition = transition($item, {
height: 0,
'min-height': 0
});
// remove element once both animation and transition are finished
Promise.all([
zoomInAnimation,
heightTransition
]).then(() => $item.remove());
});.animated {
animation-duration: 300ms
}
.mdl-card {
transition: min-height 300ms, height 300ms;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<section>
<div class="mdl-card">
<button class="mdl-button mdl-js-button">Close</button>
</div>
<p>
Content to test the height of the div above
</p>
</section>