文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Animate.css实现旋转木马滑动过渡

问使用Animate.css实现旋转木马滑动过渡
EN

Stack Overflow用户

提问于 2018-08-10 06:41:21

回答 1查看 2.8K关注 0票数 0

我的任务是创建一个按钮驱动的旋转木马，将旧幻灯片滑动到左边，然后消失，然后从右边开始在下一张幻灯片中滑动(反之亦然)。我发现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>

你可以看到单独的幻灯片DIVs堆叠在另一个之上，而不是并排，即使我试图将它们的容器设置为一行方向的弹性框。我也尝试过调整bootstrap carousel功能，但我不能让它同时淡出和滑动。

我能得到一些建议以使过渡匹配吗？谢谢!

jquery

html

css

css-transitions

回答 1

Stack Overflow用户

发布于 2018-08-11 03:31:33

对代码进行了调整并使其正常工作。我想，如果有人想要一个没有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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51776668

复制

相似问题

问使用Animate.css实现旋转木马滑动过渡
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Animate.css实现旋转木马滑动过渡EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Animate.css实现旋转木马滑动过渡
EN