如何在我的網頁上訪問特定位置時調用css動畫？

Question

我使用的fullPage.js腳本到目前爲止我實現調用CSS動畫，而達到「幻燈片」的一個機制，代碼如下：

img{ 
    -webkit-transition: all 1.2s ease-in-out; 
    -moz-transition: all 1.2s ease-in-out; 
    -o-transition: all 1.2s ease-in-out; 
    transition: all 1.2s ease-in-out; 

} 
#image-one{ 
    z-index: 0; 
} 
#image-one.active{ 
    -webkit-transform: translate3d(200px, 0px, 0px); 
    -moz-transform: translate3d(200px, 0px, 0px); 
    -ms-transform:translate3d(200px, 0px, 0px); 
    transform: translate3d(200px, 0px, 0px); 
} 

，後來在JavaScript我有：

$(document).ready(function() { 

      $('#fullpage').fullpage({ 

       'verticalCentered': false, 

       'responsive': 900, 

       'css3': false, 

       'anchors': ['one', 'two', 'three', 'four'], 

       'navigation': true, 

       'navigationPosition': 'right', 

       'navigationTooltips': ['one', 'two', 'three', 'four'], 

       'menu': '#menu', 
       'scrollingSpeed': 1000, 
       'scrollOverflow': 'true', 



       'afterLoad': function(anchorLink, index){ 

        if(index == 3){ 

         $('#image-one').addClass('active'); 

        } 

       } 


       }); 

     }); 

好的，所以現在，到達幻燈片後沒有。 3我會有這個元素的動畫：

<img src="img/a.png" alt="a" id="image-one" /> 

而且工作正常。但是，在第3張幻燈片上，我放了一個liquidSlider插件，它看起來就像那個網頁上的default settings。並且在每個標籤上，我希望在用戶打開正確的標籤頁時添加動畫元素。它的HTML代碼如下所示：

<div class="liquid-slider" id="slider-1"> 
    <div> 
    <div id="images"> 
     <img src="img/a.png" alt="a" id="image-one" /> 
</div> 
    <div class="sometext"> 
    <h2 class="title">title1</h2><p>this image is animated when user sees it because this tab is active when user scrolls down the page</p> 
     </div> 
     </div> 
    <div> 
     <div id="images"> 
     <img src="img/b.png" alt="a" id="image-two" /> 
</div> 
    <div class="sometext"> 
    <h2 class="title">title2</h2><p>how can I animate this picture when user displays that tab?</p> 
     </div> 
    </div> 
    <div> 
     <div id="images"> 
     <img src="img/c.png" alt="a" id="image-three" /> 
</div> 
    <div class="sometext"> 
    <h2 class="title">title3</h2><p>and how can I animate this picture when user displays that tab?</p> 
     </div> 
    </div> 

    </div> 

所以，我應該如何修改我的腳本/創建新的一個當用戶選擇它的顯示選項卡動畫的每個元素？謝謝你們的幫助！

Answer 1

從我注意到的問題是，當您按下幻燈片3時，動畫會一次應用於所有幻燈片。您可以做一個簡單的技巧（也許是解決方法），以便在您離開或進入一個標籤。

如果你也看看他們的Animate.css頁面，他們正在做類似的事情。刪除「動畫」類並再次添加它以爲下一張幻燈片製作動畫。您也可以通過將其添加到滑塊的轉換函數中來實現。

（注：轉換功能需要一個 'this.transition（）;' 或只是掛在那兒。）

我會說這樣的事情會做的伎倆

$('.liquid-slider').liquidSlider({ 
    pretransition: function() { 
    $('#image-one').removeClass('active'); 
    $('#image-two').removeClass('active'); 
    $('#image-three').removeClass('active'); 
    $('#image-one').addClass('active'); 
    $('#image-two').addClass('active'); 
    $('#image-three').addClass('active'); 
    this.transition(); 
    } 
}); 

有不自己測試了代碼。所以試試吧。