javascript - CSS垂直滑块过渡

Question

我正在尝试创建类似于下面的动画的东西，但我不明白从哪里开始

如果您帮助我确定动画的类型或网络资源，您可以在其中记录我并了解更多信息，我将不胜感激。

我从设计开始：

[JsFiddle](https://jsfiddle.net/braian125/r58tpjbg/2/)

标签： javascriptcsscss-transitions

Answer 1

我使用 Swiper、jQuery 和 animate.css 中的 slideChange 事件找到了解决方案

swiper.on('slideChange', function () {
  item = this.slides[this.activeIndex];
  itemInfo = $(item).find('.itemInfo');
  animation = 'rubberBand';
  itemInfo.addClass('animated ' + animation);        
  window.setTimeout( function(){
    itemInfo.removeClass('animated ' + animation);
  }, 1000);

  animation = 'jello';
  el = $(item).find('.itemPic');
  el.addClass('animated ' + animation);
  window.setTimeout( function(){
    el.removeClass('animated ' + animation);
  }, 1000);
});

动画 CSS