添加不工作的類時動畫

我有一個JQuery和CSS3片段來創建「滾動到視圖動畫」。假設發生的是它不會啓動動畫，除非類動畫的類別可見。不斷髮生的事情是它增加了類可見但動畫不會觸發。我已經在所有瀏覽器中測試過這個，並且似乎正確地做到這一點的唯一一個是Safari。我想讓這個跨瀏覽器兼容。任何幫助將是偉大的！添加不工作的類時動畫

下面是摘錄的小提琴：http://jsfiddle.net/M6VLL/

這裏是JS：

(function(e){e.fn.visible=function(t,n,r){var i=e(this).eq(0),s=i.get(0),o=e(window),u=o.scrollTop(),a=u+o.height(),f=o.scrollLeft(),l=f+o.width(),c=i.offset().top,h=c+i.height(),p=i.offset().left,d=p+i.width(),v=t===true?h:c,m=t===true?c:h,g=t===true?d:p,y=t===true?p:d,b=n===true?s.offsetWidth*s.offsetHeight:true,r=r?r:"both";if(r==="both")return!!b&&m<=a&&v>=u&&y<=l&&g>=f;else if(r==="vertical")return!!b&&m<=a&&v>=u;else if(r==="horizontal")return!!b&&y<=l&&g>=f}})(jQuery) 

jQuery(window).scroll(function(event) { 

    jQuery(".animated").each(function(i, el) { 
    var el = jQuery(el); 
    if (el.visible(true)) { 
     el.addClass("visible"); 
    } 
    }); 

});

這裏是CSS：

.animated { opacity: 0;} 
.animated.visible { 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    opacity: 1; 
} 
@-webkit-keyframes slideInLeft { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateX(-2000px); 
    transform: translateX(-2000px); 
    } 

    100% { 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
} 

@keyframes slideInLeft { 
    0% { 
    opacity: 0; 
    -webkit-transform: translateX(-2000px); 
    -ms-transform: translateX(-2000px); 
    transform: translateX(-2000px); 
    } 

    100% { 
    -webkit-transform: translateX(0); 
    -ms-transform: translateX(0); 
    transform: translateX(0); 
    } 
} 

.slideInLeft { 
    -webkit-animation-name: slideInLeft; 
    animation-name: slideInLeft; 
}

來源

2014-03-27 simpleminded

你可以看到什麼是使用開發工具您的問題。

您最初設置：

.slideInLeft { 
    -webkit-animation-name: slideInLeft; 
    animation-name: slideInLeft; 
}

，你的想法是，因爲你沒有設置剩餘的調性質，這將不會做任何事情。

但是，如果你看看真正的性能（與開發工具），你會看到，剩餘的屬性被設置爲

-webkit-animation-delay: 0s; 
-webkit-animation-direction: normal; 
-webkit-animation-duration: 0s; 
-webkit-animation-fill-mode: none; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-name: slideInLeft; 
-webkit-animation-play-state: running;

這意味着動畫已經運行！

當你設置.visible類時，你改變了一些動畫屬性，但是太遲了，動畫已經完成了。

來源

2014-03-30 19:08:49 vals

這似乎是問題所在。我一直在搞亂這些屬性，但是當添加「可見」類時，似乎無法激活它。我現在在Firefox中運行它，但仍然沒有運氣讓它在Chrome中重新工作並在IE中工作。有任何想法嗎？這是更新的小提琴：[link]（http://jsfiddle.net/6ELFY/） – simpleminded

你不需要爲動畫這個，你可以使用轉換。我也會用translateX(-100%)而不是你所擁有的東西，所以你肯定它會花費必要的金額，永遠不會超過它。要使其跨瀏覽器，您只需添加其他前綴。我也用一個else聲明，使其返回到其默認位置時頁面上下滾動時

Demo

來源

2014-03-27 23:16:45

我之所以這樣設置是因爲我使用了Daneden的Animate.css。我構建WP主題，並一直試圖讓它設置爲自定義，並能夠使用所有不同的效果。這種用法可以在Chrome和Safari中使用，但從不使用IE或FF。現在我試圖讓它在所有瀏覽器中都能正常工作。我也有意設立只觸發一次。 – simpleminded

添加不工作的類時動畫

回答

相關問題