带有 Animate.css 的轮播滑动过渡

【问题标题】：Carousel Sliding Transitions with Animate.css带有 Animate.css 的轮播滑动过渡
【发布时间】：2018-08-11 03:31:32
【问题描述】：

我的任务是创建一个按钮驱动的旋转木马，它将旧幻灯片向左滑动并消失，并从右侧滑入下一张幻灯片（反之亦然）。我在Animate.css 中找到了这些类来为我节省大量工作，但是我无法在我的代码中正确地进行转换：

var fadeInLeft = "animated fadeInLeft .5s";
var fadeOutLeft = "animated fadeOutLeft .5s";
var fadeInRight = "animated fadeInRight .5s";
var fadeOutRight = "animated fadeInRight .5s";
var animationend = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";  

$(function(){$('.control-button')
               .on('click',function(event){
                                      activateCarousel(($(event.target).attr('class').indexOf('right') > -1 )?'right':'left');
                                         }
                  );  
 });

function activateCarousel(motion)
{
   var currentItem = $('.carousel-item.active');
   var nextItem = (motion == 'right') ? currentItem.next() : currentItem.prev();

   if(nextItem.length)
   {
      var oldMotion = (motion == 'right') ? fadeOutLeft : fadeOutRight;
      var newMotion = (motion == 'right') ? fadeInRight : fadeInLeft;
   
      nextItem.addClass(newMotion);
      currentItem.addClass(oldMotion).on(animationend,function(){currentItem.removeClass('active'); nextItem.removeClass(newMotion); currentItem.removeClass(oldMotion);});
      nextItem.addClass('active');
      
   }

   
   
   
}
.carousel-box {
    display: flex;              /* establish flex container */
    flex-direction: row;     /* stack flex items horizontally */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;        /* center items horizontally, in this case */
    height: 300px;
}

.carousel-item
{
  display:none;
}

.active
{
  display: inline-block;
}

.control-container
{
  margin: 20px;
}

@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    
     
  <div class = 'carousel-container'>
  
    <div class = 'carousel-box'>
       <div class = 'control-container left'>
          <button class = 'control-button left'>Previous</button>
       </div>
       
       <div class = 'carousel-body'>
          
             <div class = 'carousel-item active'><img src = 'https://i.ytimg.com/vi/GIbVhJGiekM/maxresdefault.jpg' height="200" width="400"></div>
             <div class = 'carousel-item'><img src = 'https://cdn.static-economist.com/sites/default/files/20171111_FNP504.jpg' height="200" width="400"></div>
             <div class = 'carousel-item'><img src = 'http://www.zoonewengland.org/media/813822/redpanda_gallery10.jpg' height="200" width="400"></div>
          
       </div>
       
       <div class = 'control-container right'>
           <button class = 'control-button right'>Next</button>
       </div>
    </div>
  
  </div>
  
  </body>

</html>

即使我尝试将它们的容器设置为行方向的弹性框，您也可以看到单个幻灯片 DIV 一个在另一个之上，而不是并排堆叠。我也尝试过调整引导轮播功能，但我无法让它同时褪色和滑动。

我能否获得一些建议以使过渡匹配？谢谢！

【问题讨论】：

    标签： jquery html css css-transitions


    【解决方案1】：

    对代码进行了调整并使其工作。如果有人想要一个没有 Bootstrap 的轮播并且更容易控制转换，我想我会以工作代码为例。享受吧！

    var fadeInLeft = "animated fadeInLeft fast";
var fadeOutLeft = "animated fadeOutLeft faster";
var fadeInRight = "animated fadeInRight fast";
var fadeOutRight = "animated fadeOutRight faster";
var animationend = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";  

$(function(){

$('.control-button')
               .on('click',function(event){
                                           event.preventDefault();
                                            activateCarousel(($(event.target).attr('class').indexOf('right') > -1 )?'right':'left');
                                         }
                  ); 
updateButtons($('.carousel-item.active'));
  
 var targetClass = '.carousel-container'; 
  
$(targetClass).on('change', function(event){console.log('test'); console.log($(targetClass).attr('width'));})  
  
  
  });                
                  
                 
function activateCarousel(motion)
{
   var currentItem = $('.carousel-item.active');
   var nextItem = (motion == 'right') ? currentItem.next() : currentItem.prev();

   if(nextItem.length)
   {
      var oldMotion = (motion == 'right') ? fadeOutLeft : fadeOutRight;
      var newMotion = (motion == 'right') ? fadeInRight : fadeInLeft;
   
      nextItem.addClass(newMotion).one(animationend, function(){
      nextItem.removeClass(newMotion)
      });
      
      currentItem.addClass(oldMotion)
             .one(animationend,function(){
                               currentItem.removeClass('active').removeClass(oldMotion); 
                               nextItem.addClass('active');
                               currentItem.unbind();
                               updateButtons(nextItem);
                               });
                               

      
   }
}

function updateButtons(nextItem)
{
    if(nextItem.next().length < 1){$('.control-button.right').css('visibility','hidden');} else{$('.control-button.right').css('visibility','visible');}
    if(nextItem.prev().length < 1){$('.control-button.left').css('visibility','hidden');} else{$('.control-button.left').css('visibility','visible');}

}
    .carousel-container{
    width: auto;
    height: auto;
    padding: 10px;
    position: relative;
}

.carousel-box{
   display: flex;
   align-items: center;
   justify-content: center; 
   height: 300px;
}

.carousel-body {
    display: flex;          
    flex-direction: row;     
    overflow: hidden;
    max-width: 500px;
   
}

.carousel-item
{
  display:none;
}

.active
{
  display: inline;
}

.control-container
{
  margin: 20px;
}

.left{float: right;}

@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */
 :root{
 --animation-slide-offset-pos-x: 10%;
 --animation-slide-offset-neg-x: -10%; 
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(var(--animation-slide-offset-neg-x), 0, 0);
    transform: translate3d(var(--animation-slide-offset-neg-x), 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(var(--animation-slide-offset-neg-x), 0, 0);
    transform: translate3d(var(--animation-slide-offset-neg-x), 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(var(--animation-slide-offset-pos-x), 0, 0);
    transform: translate3d(var(--animation-slide-offset-pos-x), 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(var(--animation-slide-offset-pos-x), 0, 0);
    transform: translate3d(var(--animation-slide-offset-pos-x), 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(var(--animation-slide-offset-neg-x), 0, 0);
    transform: translate3d(var(--animation-slide-offset-neg-x), 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(var(--animation-slide-offset-neg-x), 0, 0);
    transform: translate3d(var(--animation-slide-offset-neg-x), 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(var(--animation-slide-offset-pos-x), 0, 0);
    transform: translate3d(var(--animation-slide-offset-pos-x), 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(var(--animation-slide-offset-pos-x), 0, 0);
    transform: translate3d(var(--animation-slide-offset-pos-x), 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.fastest {
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}
    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    
     
  <div class = 'carousel-container' style="background-color: #e5d3c0">
  
    <div class = 'carousel-box'>
      <!------------------------------------------------------------------------------------------------------------------------------------------> 
       <div class = 'control-container left'>
          <button class = 'control-button left'>Previous</button>
       </div>
       
       <div class = 'carousel-body'>
          
             <div class = 'carousel-item active'><img src = 'https://i.ytimg.com/vi/GIbVhJGiekM/maxresdefault.jpg' height="200" width="400"></div>
             <div class = 'carousel-item'><img src = 'https://cdn.static-economist.com/sites/default/files/20171111_FNP504.jpg' height="200" width="400"></div>
             <div class = 'carousel-item'><img src = 'https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2018/withchinassp.jpg' height="200" width="400"></div>
             <div class = 'carousel-item'><img src = 'https://nationalzoo.si.edu/sites/default/files/styles/480x240_scale_and_crop/public/animals/red-panda-004.jpg?itok=of88ZRdq' height="200" width="400"></div>
          
       </div>
       
       <div class = 'control-container right'>
           <button class = 'control-button right'>Next</button>
       </div>
     <!------------------------------------------------------------------------------------------------------------------------------------------> 
    </div>
  
  </div>
  
  </body>
</html>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-11
      • 2015-03-07
      • 2014-08-22
      • 1970-01-01
      • 2019-04-29
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode