Question

我的目标是制作一个滑动动画，以便在两个div之间进行切换。以下是我到目前为止的情况：

＆＃13;

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];
})

＆＃13;

#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%);
  }
}

＆＃13;

<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过渡来实现我的目标。

Answer 1

问题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，我现在无法帮助你。

Answer 2

我很好奇，我创建了一个带有包装器和内部容器的版本，其中包含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 +评论。随意尝试单独动画元素。

使用CSS动画同时滑动两个div

2 个答案: