javascript javascript動畫範例 - 當CSS3轉換完成時回調




javascript動畫效果 tooltips中文 (5)

另一種選擇是使用jQuery Transit Framework來處理你的CSS3轉換。 轉換/效果在移動設備上表現良好,並且您不必在CSS文件中添加一行混亂的CSS3轉換以執行動畫效果。

下面是一個例子,當你點擊它時將元素的不透明度轉換為0,並且在轉換完成後將被移除:

$("#element").click( function () {
    $('#element').transition({ opacity: 0 }, function () { $(this).remove(); });
});

JS小提琴演示

我想淡出一個元素(將其不透明度轉換為0),然後在完成時從DOM中移除該元素。

在jQuery中,這是直截了當的,因為您可以在動畫完成後指定“刪除”。 但是,如果我希望使用CSS3轉換進行動畫製作,無論如何要知道轉換/動畫何時完成?


目前接受的答案在Chrome中為動畫啟動了兩次。 據推測這是因為它可以識別webkitAnimationEnd以及animationEnd 。 以下絕對只會觸發一次:

/* From Modernizr */
function whichTransitionEvent(){

    var el = document.createElement('fakeelement');
    var transitions = {
        'animation':'animationend',
        'OAnimation':'oAnimationEnd',
        'MSAnimation':'MSAnimationEnd',
        'WebkitAnimation':'webkitAnimationEnd'
    };

    for(var t in transitions){
        if( transitions.hasOwnProperty(t) && el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

$("#elementToListenTo")
    .on(whichTransitionEvent(),
        function(e){
            console.log('Transition complete!  This is the callback!');
            $(this).off(e);
        });

對於轉換,您可以使用以下方法來檢測通過jQuery進行轉換的結束:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Mozilla有一個很好的參考:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

對於動畫非常相似:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

請注意,您可以將所有瀏覽器預定義的事件字符串同時傳遞到bind()方法,以支持在支持它的所有瀏覽器上觸發事件。

更新:

根據Duck留下的評論:您使用jQuery的.one()方法來確保處理程序只觸發一次。 例如:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

更新2:

jQuery bind()方法已被棄用,而on()方法是jQuery 1.7首選。 bind()

您也可以在回調函數上使用off()方法來確保它只會被觸發一次。 這是一個等同於使用one()方法的示例:

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

參考文獻:


對於任何人來說,這可能是方便的,這裡是一個jQuery依賴函數,我成功地通過CSS類應用CSS動畫,然後從之後獲得回調。 它可能無法正常工作,因為我在Backbone.js應用程序中使用它,但可能有用。

var cssAnimate = function(cssClass, callback) {
    var self = this;

    // Checks if correct animation has ended
    var setAnimationListener = function() {
        self.one(
            "webkitAnimationEnd oanimationend msAnimationEnd animationend",
            function(e) {
                if(
                    e.originalEvent.animationName == cssClass &&
                    e.target === e.currentTarget
                ) {
                    callback();
                } else {
                    setAnimationListener();
                }
            }
        );
    }

    self.addClass(cssClass);
    setAnimationListener();
}

我用它有點像這樣

cssAnimate.call($("#something"), "fadeIn", function() {
    console.log("Animation is complete");
    // Remove animation class name?
});

來自http://mikefowler.me/2013/11/18/page-transitions-in-backbone/原創想法

這似乎很方便: http://api.jqueryui.com/addClass/ : http://api.jqueryui.com/addClass/

更新

經過上面的代碼和其他選項的努力之後,我會建議在CSS動畫結束的時候非常謹慎。 隨著多個動畫的進行,這可能會非常快速地進行事件監聽。 我強烈建議像每個動畫一樣的GSAP動畫庫,甚至小型動畫庫。


將高度設置為自動並轉換最大高度。

在Chrome v17上測試過

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}




javascript jquery css css3