jquery - 使用 Animate.css 的轮播滑动过渡

标签 jquery html css css-transitions

我的任务是创建一个按钮驱动的旋转木马，它将旧幻灯片向左滑动并消失，然后从右侧滑入下一张幻灯片(反之亦然)。我在 Animate.css 中找到了类(class)为我节省了很多工作，但我无法在我的代码中获得正确的转换:

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 一个堆叠在另一个之上，而不是并排堆叠，即使我试图将它们的容器设置为沿行方向的 flexbox 。我也试过调整引导轮播功能，但我无法让它同时淡出和滑动。

我可以得到一些建议来使转换匹配吗？谢谢!

最佳答案

调整了代码并让它工作。我想如果有人想要一个没有 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>

关于jquery - 使用 Animate.css 的轮播滑动过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51776668/

上一篇：javascript - 如何将我的整个 html 文件放在一个窗口中

下一篇：javascript - 从 parent 到 child 应用相同的填充值？

相关文章：

javascript - 有时 window.resize 需要两次调整大小才能实际执行我的 javascript

html - Bootstrap 3 带有图标和旋转木马的导航栏

html - CSS:背景图像不显示

css - 自动居中并保持 Div 中图像的纵横比

javascript - 获取网站的主要颜色

javascript - Css 溢出隐藏所有内容。无法修改滚动条

javascript - 响应式 jquery 处于非事件状态

jquery 选项选择过滤器由其他选项选择

javascript - 如何使用每个功能检查单选按钮

html - div不能和screen一样宽，另一个div不允许

©2024 IT工具网  联系我们