CSS垂直滑块过渡

Question

我正在尝试创建类似于以下动画的内容，但是我不知道从哪里开始

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

我从设计开始：

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

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

Animate CSS

Answer 2

根据提供的图像，感觉像是react-move和GreenSock的动画库。

请参阅此link以获取信息。

我在Twitter Justin Marson上有一位UI专家，他从事许多动画工作，您可以与他联系以进行更多的研究。