Question

我正在使用jCarousel制作简单的幻灯片。它工作正常，我经常使用它。但是，我刚刚意识到我无法设置转换持续时间（因为我正在使用CSS转换）。

请参阅以下代码：

JS部分：

var carousel = $('#sliderContainer');
carousel.jcarousel({
     transitions: Modernizr.csstransitions ? {
                transforms: Modernizr.csstransforms,
                transforms3d: Modernizr.csstransforms3d,
                easing: 'ease-in-out',
                // any way to put something like : duration: 1s ?
            } : false
});

CSS部分（Sass语法）：

#slider
width: 10000%
position: absolute
transition-duration: 5s
-webkit-transition-duration: 5s

jCarousel在#slider元素上应用转换。

另请参阅生成的HTML：

 <div id="slider" style="transition: all 5s ease; -webkit-transition: all 5s ease; -webkit-transform: translate3d(-2048px, 0, 0);">

问题在于：转换持续时间仍然是默认值（.4或.5我猜）...

有什么想法吗？

Answer 1

奇怪的是这里的过渡期：

 <div id="slider" style="transition: all 5s ease; -webkit-transition: all 5s ease; -webkit-transform: translate3d(-2048px, 0, 0);">

没有解释。

我只是过来了！重要的是：

#slider
  width: 10000%
  position: absolute
  transition-duration: 5s !important
  -webkit-transition-duration: 5s !important

有效。但它真的很奇怪，父元素没有过渡，所以我不知道为什么我需要一个！重要...

Answer 2

var carousel = $('#sliderContainer');
carousel.jcarousel({
     transitions: Modernizr.csstransitions ? {
                transforms: Modernizr.csstransforms,
                transforms3d: Modernizr.csstransforms3d,
                easing: 'cubic-bezier(0.680, -0.550, 0.265, 1.550);',
            } : false
});

参考：http://matthewlein.com/ceaser/

Jcarousel：设置CSS转换持续时间

2 个答案: