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

时间：2018-08-09 22:41:21

标签： jquery html css css-transitions

我一直致力于创建一个按钮驱动的轮播，该轮播将旧幻灯片向左滑动并消失，并从右向下滑动（反之亦然）。我在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堆叠在一起，而不是并排放置，即使我尝试将其容器设置为行方向的弹性盒。我还尝试过调整Bootstrap轮播功能，但无法使其同时消失和滑动。

我可以得到一些建议来使过渡匹配吗？谢谢！

1 个答案:

答案 0 :(得分：0)

调整了代码，使其生效。我想如果有人想要没有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>

相关问题
最新问题