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

时间:2017-04-15 09:29:59

标签: javascript jquery css css3 css-animations

我的目标是制作一个滑动动画,以便在两个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;
&#13;
&#13;

我试图解决这个问题有两个:

  1. 当我点击current$('#red')时,它会在播放动画前变为蓝色。但是,当current$('blue')时,动画效果正常。

  2. div滑动时是否可能没有空格?我试过移动事件处理程序的$elem_in.css('animation', 'slideLeftIn 1s ease'); outisde,但是在这种情况下动画根本不会播放。

  3. 我已经看过this one之类的类似问题,但答案使用的是绝对定位,而我希望使用CSS过渡来实现我的目标。

2 个答案:

答案 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 +评论。随意尝试单独动画元素。