Question

更新：Fiddle

P.S。：CSS在小提琴中看起来很不稳定，但动画效果很好。我只是尝试使用CSS来使运动更加流畅，并满足使用CSS的要求。

我正在为技术技能屏幕编写一个jQuery轮播。除了这一部分，我已经完成了所有工作。我可以在正确的方向上使用提示。基本上，要求是使用CSS为图像导航设置动画。一切都是用JavaScript / jQuery构建的。这是事件监听器/动画：

$('html').on('keydown', function(e) {
  if (e.keyCode === 37 || e.keyCode === 38) {
    first = $('.slider li:first').detach();
    slider.append(first);
  }
  else if (e.keyCode === 39 || e.keyCode === 40) {
    last = $('.slider li:last').detach();
    slider.prepend(last);
  }
});

之前我曾使用CSS 3转换，但我从未将它们应用于JavaScript所做的更改。我一直在拖网搜索规格，但它非常广泛。是否有可能为这些动作制作动画，因为它们不是在视觉上定位，而是在逻辑中重新排序？如果是这样，请帮我弄清楚要制作动画的属性。我尝试使用'all'属性，但我认为它不起作用。这是我试过的CSS：

.slider li {
  display: inline-block;
  transition: all 2s, height 2s, background-color 2s, transform 2s;
}

最后，以防您想要查看标记：

<ul class="slider">
  <li>
    <img src="https://lg-devtest.herokuapp.com/images/box_avatar.png">
    <div class="meta">
      <h2>Title: Avatar</h2>
      <p>IMDB Rating: 5.7</p>
    </div>
  </li>
  <li>
    <img src="https://lg-devtest.herokuapp.com/images/box_quantum_of_solace.png">
    <div class="meta">
      <h2>Title: Quantum of Solace</h2>
      <p>IMDB Rating: 5.4</p>
    </div>
  </li>
  <li>
    <img src="https://lg-devtest.herokuapp.com/images/box_breaking_bad.png">
    <div class="meta">
      <h2>Title: Breaking Bad</h2>
      <p>IMDB Rating: 7.4</p>
    </div>
  </li>
  <li>
    <img src="https://lg-devtest.herokuapp.com/images/box_brick_mansions.png">
    <div class="meta">
      <h2>Title: Brick Mansions</h2>
      <p>IMDB Rating: 7.4</p>
    </div>
  </li>
  <li>
    <img src="https://lg-devtest.herokuapp.com/images/box_gangs_of_new_york.png">
    <div class="meta">
      <h2>Title: Gangs of New York</h2>
      <p>IMDB Rating: 7.4</p>
    </div>
  </li>
</ul>

如何使用已定位JavaScript的CSS为元素设置动画？

0 个答案: