我的目标是制作一个滑动动画,以便在两个div之间进行切换。以下是我到目前为止的情况:
var current = $('#blue');
var other = $('#red');
function slider($elem_in, $elem_out) {
$elem_in.show();
// reset the animations
$elem_in.css('animation', '');
$elem_out.css('animation', '');
// remove the previous event handler
$elem_in.off('animationend');
// make the elem_out slide out
$elem_out.css('animation', 'slideLeftOut 1s ease');
$elem_out.on('animationend', function() {
$elem_in.css('animation', 'slideLeftIn 1s ease');
$elem_out.hide();
});
}
$('#container').on('click', function() {
slider(other, current);
// invert the two variables
other = [current, current = other][0];
})

#container {
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid black;
}
#container div {
height: 100%;
width: 100%;
}
#red {
background: red;
}
#blue {
background: blue;
}
/* slide to the left in */
@keyframes slideLeftIn {
0% {
transform: translateX(150%);
}
100% {
transform: translateX(0%);
}
}
/* slide to the left out */
@keyframes slideLeftOut {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-150%);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="blue"></div>
<div id="red"></div>
</div>
&#13;
我试图解决这个问题有两个:
当我点击current
为$('#red')
时,它会在播放动画前变为蓝色。但是,当current
为$('blue')
时,动画效果正常。
div滑动时是否可能没有空格?我试过移动事件处理程序的$elem_in.css('animation', 'slideLeftIn 1s ease');
outisde,但是在这种情况下动画根本不会播放。
我已经看过this one之类的类似问题,但答案使用的是绝对定位,而我希望使用CSS过渡来实现我的目标。
答案 0 :(得分:2)
问题1与放置元素的位置有关。在第二个元素滑动后,向右滑动到左边没有任何东西。只需使用第一个动画div并将其追加到最后。
$elem_out.hide().remove().appendTo("#container");
此外,您不需要切换逻辑。只需引用调用中的2个元素到slider()即可。类似的东西:
$('#container').on('click', function() {
slider($(this).children().eq(1),$(this).children().eq(0) )
})
https://jsfiddle.net/0xak4aes/
至于问题2,我现在无法帮助你。
答案 1 :(得分:0)
我很好奇,我创建了一个带有包装器和内部容器的版本,其中包含2个浮在其中的元素,并为容器设置动画而不是单独的元素。
function slider(container) {
container.css('animation', 'slideLeft 1s ease')
.on('animationend', function() {
console.log("swap!");
container.off('animationend') // remove handler
.css('animation', '') // reset css
.children().eq(0).remove().appendTo(container); // swap
});
}
$('#container').on('click', function() {
slider($(this));
})
https://jsfiddle.net/ofc4w7dy/
检查我的css +评论。随意尝试单独动画元素。