如何在重置位置時防止傳送帶容器過渡？

我已經申請CSS transition到translateX點擊下一步按鈕時，我從0 to 100%動畫我的旋轉木馬的父元素，我想不過做的是防止動畫踢球時，我重置轉換位置回0裏面我setTimeout的。理想情況下，我希望將轉換設置爲無，然後在輪播重置後快速刪除此項。任何人都可以推薦我如何做到這一點？如何在重置位置時防止傳送帶容器過渡？

CSS

.carousel { 
    height: 100%; 
    -webkit-transition: -webkit-transform .1s ease-in-out; 
    -webkit-transform: translate(0, 0); 
}

btnNext.on('click', function (e) { 
     e.preventDefault(); 

     //move carousel to right 100% 
     carousel.css('transform', 'translateX(-100%)'); 

     $('.slide:first').insertAfter('.slide:last'); 

     setTimeout(function() { 
      resetSlides(); 

      resetCarousel(); 
     }, 5000); 

    }); 

function resetCarousel() { 
     $('.carousel').css({ 
      'transform': 'translateX(0%)', 
      'transition': 'none' 
     }); 

     //now remove inline transition:none style without a transition occurring? 
    }

的jsfiddle：http://jsfiddle.net/GKv4p/22/

來源

2013-10-23 styler

我做了一些改動你的代碼，但我無法找到該問題的完整解決方案。 http://jsfiddle.net/GKv4p/32/在這個例子中，你仍然會在懸停前一個/下一個箭頭時看到問題的發生。你可以從'.expose- *'中移除'transition'屬性，但是這會消除懸停效果。不幸的是，我找不到完全實現你想要的東西的方法。但也許有了這個，你或某人可能能夠工作:) –

你可以使用第二個CSS類，「動畫」。在你的CSS然後你可以有：

.carousel { 
    height: 100%; 
} 

.carousel.animated { 
    -webkit-transition: -webkit-transform .1s ease-in-out; 
    -webkit-transform: translate(0, 0); 
}

在你的JavaScript，那麼你會以添加或刪除動畫添加或刪除這個額外的類。

來源

2013-10-23 16:23:34

好的，所以我想我可以按照你的意願工作。

我所做的主要變化爲-webkit-transition: all .1s ease-in-out;添加到.expose-*類，並添加一個延遲到$('.carousel').attr('style', '');

結束了this Fiddle

來源

2013-10-23 21:03:28

注意：我不確定第一次更改甚至是必要的，但我已經做過這些更改......你可能會得到它的工作原理添加延遲風格清除:) –

如何在重置位置時防止傳送帶容器過渡？

回答

相關問題