幻燈片延遲

Question

，從而按照的jsfiddle http://jsfiddle.net/greggy_coding/013481b9/19/

對於這個問題的焦點是在第一和第二幻燈片過渡之間...當你到了第二過渡類的目的不要立即添加在幻燈片上，他們等待大約1秒的滑塊區域......有人可以解釋爲什麼我想要在幻燈片加載時立即添加類。

PS我使用getScript加入從該網站的另一部分加載腳本...這是腳本，（滑塊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"); 

這只是後getScript加入滑塊，（.slides）到另一個頁面的加載....

$(".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

如果您打開removeClass到addClass陳述後，你不應該看到此行爲（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 
} 

希望這會有所幫助。祝你好運！