如何防止轮播容器在重置位置时过渡

How to prevent transition on carousel container when reseting its position?

本文关键字：位置 置位 何防止      更新时间：2023-09-26

我已经应用了 CSS transition来translateX轮播的父元素，我在单击下一步按钮时从0 to 100%开始制作动画，但是我想做的是防止当我在 setTimeout 内将平移位置重置回0时动画启动。理想情况下，我想将过渡设置为无，然后在我的轮播重置后快速删除它。谁能推荐我怎么做？

.CSS 

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

.JS

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/

你可以使用第二个css类，"animated"。在你的CSS中，你可以有：

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

然后，在 JavaScript 中，您将添加或删除此额外类以添加或删除动画。

好的

，所以我想我让它按照你想要的方式工作。

我所做的主要更改是将-webkit-transition: all .1s ease-in-out;添加到.expose-*类中，并在$('.carousel').attr('style', '');中添加延迟

最终得到了这个小提琴

相关文章：