[英]Animation doesn't complete with jQuery TransitionEnd event
DIV会向右移动,但在隐藏之前不会向左移动(再次返回)。 请参阅底部的Codepen以进行试用。
我只是在这里发布JavaScript代码。在代码笔中可以找到CSS和HTML。
$(document.body).on('click','.rightnav.front', function () {
var x = $(this).parent().parent();
x.addClass('moveright')
.one('transitionend', function() {
x.removeClass('moveright')
})
.one('transitionend', function(){
x.addClass('moveleft');
})
.one('transitionend', function() {
x.addClass('hidden').addClass('offset');
$('.rightnav.front').removeClass('front');
var nextId = Number(x.attr('id')) + 1;
var nextWidget = $('#' + nextId);
nextWidget.removeClass('hidden');
nextWidget.children().find('.rightnav').addClass('front');
})
});
这是现场测试的CodePen.IO链接: http ://codepen.io/nygter/pen/QbpegM
看一下这个解决方案,也许(确保)它不是理想的,但应该可以按预期工作。 正如我在评论中提到的,我已经将动画从jQuery移到了@ keyframes
。
魔术来自:
.widget.moveright{
left:450px;
margin-left:-100px;
opacity:0.5;
}
和
x.addClass('moveright')
.one('transitionend', function() {
x.removeClass('moveright')
})
.one('transitionend', function(){
x.addClass('moveleft');
}) //...
转化成:
@keyframes moveright{
50% {
left:450px;
margin-left:-100px;
opacity:0.5;
}
100% {
opacity: 0;
}
}
.widget.moveright{
animation: moveright 1s ease;
-webkit-animation: moveright 1s ease;
}
和
x.addClass('moveright')
.one('animationend', function() {
$(this)
.removeClass('moveright')
.addClass('hidden offset');
//...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.