CSS垂直滑块过渡[关闭]答案

【问题标题】：css vertical slider transition [closed]CSS垂直滑块过渡[关闭]
【发布时间】：2019-01-17 05:09:11
【问题描述】：

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

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

我从设计开始：

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

【问题讨论】：

标签： javascript css css-transitions

【解决方案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

【讨论】：

【解决方案2】：

根据提供的图片，感觉有点像 react-move 和 GreenSock 这样的动画库。

请参考此link 获取信息。

我在 Twitter 上关注了一位 UI 专家Justin Marson，他做了很多动画工作，您可以与他联系以进行更多研究。

【讨论】：

您好，非常感谢，非常感谢您的帮助，这很有趣。记得前段时间我用 animate.css daneden.github.io/animate.css做一个项目