滑动延迟没有明显原因CSS滑块JQuery

Question

因此根据jsfiddle http://jsfiddle.net/greggy_coding/013481b9/19/

出于这个问题的目的，重点是在第一个和第二个幻灯片过渡之间...当您到达第二个过渡时，类不会立即添加到幻灯片中，它们会等待约1秒钟的滑块区域...可以有人解释了为什么我要在幻灯片加载时立即添加类。

ps我正在使用网站另一部分的getscript来加载脚本...这是脚本（slider-animation.js）。

$(function() {
    var $slides = $(".slides");
    $slides.first().addClass("new-class");
    $(".slide-container")
    .on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){
        // do something here
        $slides.find(".slide-container [class^='add-anim']").removeClass("animat fadeInUpBig bounceInUp");
        var $radio = $slides.find(":radio[name='radio-btn']:checked");

这是在将滑块（.slides）加载到另一页之后的getscript。

$(".tile-area-main").css({width: "720px"}).load("what.html .slides");
      $.getScript("js/slider/slider-animations.js");

Answer 1

所以我终于找到了解决方案： http : //jsfiddle.net/ea55zpe3/

不要忘记行： overflow: hidden; 在body ，这消除了显示一秒钟的滚动条。

的HTML

<div class="tile-area-main" id="tam-content">
<ul class="slides animated bounceInUp">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
        <div class="slideM">
            <p class="add-anim-up">thisis an area for some text</p>
            <p class="add-anim-left">Thisthis is another text area</p>
        </div>
        <div class="nav">
            <label for="img-6" class="prev">&#x2039;</label>
            <label for="img-2" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slideM">
            <p class="add-anim-up">some more text to have some classes added to</p>
            <p class="add-anim-up">some more text with something to do</p>
        </div>
        <div class="nav">
            <label for="img-1" class="prev">&#x2039;</label>
            <label for="img-3" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slideM">
            <div id="referrals" class="add-anim-up">
                <div id="company-title">
                     <h2>Referrals</h2>

                </div>
                <p class="add-anim-up">herapist or speech and language therapist) referrals are accepted, music therapy is unfortunately not currently available on the NHS. Schools are able tssions. If you have any questions or enquiries about musitate to contact us. (contact icon)</p>
            </div>
            <div id="local-links" class="add-anim-up">
                <div id="company-title">
                     <h2>Local Links</h2>

                </div>
                <br/>
                <p class="add-anim-left">MusAbility are always interested in networking and making local links with other businesses, charities and organisations in the North-West. Please send us a message to tell us about yourselves or to arrange to meet for a coffee and a chat (other beverages are accepted!) If you are interested in building a more formal partnership or co-promoting, please get in touch.</p>
            </div>
        </div>
        <div class="nav">
            <label for="img-2" class="prev">&#x2039;</label>
            <label for="img-4" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slideM">
            <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-3" class="prev">&#x2039;</label>
            <label for="img-5" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slideM">
            <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-4" class="prev">&#x2039;</label>
            <label for="img-6" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slideM">
            <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-5" class="prev">&#x2039;</label>
            <label for="img-1" class="next">&#x203a;</label>
        </div>
    </li>
</ul>

的CSS

body {
    background-color:#000;
    overflow:hidden;
}
.metro .tile-area-main {
    position: fixed;
    left: 290px;
    top: 150px;
    display: inline-block;
    color: #ffffff;
    cursor: pointer;
    width: 780px;
    height: 450px;
    overflow: hidden;
    z-index : 3000;
}
.metro .tile-area-main p {
    margin: 0;
    padding: 0 2.4em 0.6em;
    font-size: 1.2em;
    line-height: 1.5;
    color : #fff;
    cursor: pointer;
}
.slides {
    padding: 0;
    width: 609px;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
}
.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.slides input {
    display: none;
}
.slide-container {
    display: block;
}
.slideM {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 420px;
    display: block;
    position: absolute;
    transform: scale(0);
    transition: all .7s ease-in-out;
}
.slideM img {
    width: 100%;
    height: 100%;
}
.slideM p {
    color: #fff;
    font-size : 22px;
}
.nav {
    z-index:9999;
    top:0;
}
.nav .prev {
    margin-left:-80px
}
.nav .next {
    right: -80px;
}
.nav label {
    width: 100px;
    height: 100%;
    display: none;
    position: absolute;
    opacity: 1;
    z-index: 9999;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 56pt;
    text-align: center;
    line-height: 20px;
    font-family:"Varela Round", sans-serif;
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slideM:hover + .nav label {
    opacity: 0.5;
}
.nav label:hover {
    opacity: 1;
}
input:checked + .slide-container .slideM {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label {
    display: block;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 1000px, 0);
        transform: translate3d(0, 1000px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 1000px, 0);
        transform: translate3d(0, 1000px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
    opacity: 0.3;
    background-color: rgba(0, 0, 0, 0.3);
}
.new-class .slideM {
    border: 2px solid red;
}

JS

$(function () {
    var $slides = $(".slides");
    $slides.first().addClass("new-class");
    $(".add-anim-up").addClass("animated fadeInUpBig bounceInUp");
    $(".add-anim-left").addClass("animated fadeInUpBig bounceInUp");
    $(".nav").on("click", function () {
        $(".add-anim-up").removeClass("animated fadeInUpBig bounceInUp");
        $(".add-anim-left").removeClass("animated fadeInUpBig bounceInUp");
        if ($(".add-anim-up").css('opacity') == '1') {
            $(".add-anim-up").addClass("animated fadeInUpBig bounceInUp");
            $(".add-anim-left").addClass("animated fadeInUpBig bounceInUp");

        };
    });
});

Answer 2

如果在addClass语句之后将removeClass切换为，则不应看到此行为（ http://jsfiddle.net/013481b9/25/ ）：

var $radio = $slides.find(":radio[name='radio-btn']:checked");

$radio.next(".slide-container").find(".add-anim-up").addClass("animated fadeInUpBig");

$radio.next(".slide-container").find(".add-anim-left").addClass("animated fadeInUpBig");

$slides.find(".slide-container [class^='add-anim']").removeClass("animated fadeInUpBig bounceInUp");

您看到的暂停/闪烁是在添加下一个动画之前删除的类。

我注意到的另一件事（但不是引起此特定行为）是transitionend事件正在运行多次（对于框的每次更改CSS更改），因此我添加了对transform事件的检查：

if (e.originalEvent.propertyName == 'transform') {
    // do stuff
}

希望这会有所帮助。 祝你好运！