連鎖webkit動畫

我想要創建一個'連鎖'動畫，將屏幕上的div元素連續兩步移動到屏幕上的兩個不同點。連鎖webkit動畫

因此，如果我的div開始於（0,0），我希望這個div在2秒內動起來並移向（100,100）。到達後一個目的地後，再次進行動畫並在3秒內移動到指向（200,200）。

使用-webkit-animation我可以做一個翻譯或動畫，但我不能鏈接第二個動畫在第一個完成後開始 - 因爲我沒有提供的句柄（事件或CSS類），可以給我這樣的信息。

我很高興使用一點JavaScript魔術作爲解決方案的一部分。

下面是一些代碼來可視化什麼，我試圖做的：

HTML：

<div id="box"></div>

CSS：

body { 
    position: relative; 
} 

#box { 
    width: 64px; 
    height: 64px; 
    position: absolute; 
    text-indent: -9999px; 
} 

.translate1 { 
    -webkit-transform: translate(100px, 100px); 
    -webkit-transition: all 2s ease-in; 
} 

.translate2 { 
    -webkit-transform: translate(100px, 100px); 
    -webkit-transition: all 23 ease-in; 
}

的Javascript

$('#box').click(function(){ $(this).addClass('translate1') });

編輯：在解決方案之後T採用WebKit的動畫，因爲它是目前在OSX顯示流暢類似天然的動畫

來源

2011-06-08 Hady

我使用jQuery和Modernizr的，那麼這樣的功能：

speed = 500; 

var vP = ""; 
var transitionEnd = "transitionEnd"; 
if ($.browser.webkit) { 
    vP = "-webkit-"; 
    transitionEnd = "webkitTransitionEnd"; 
} else if ($.browser.msie) { 
    vP = "-ms-"; 
    transitionEnd = "msTransitionEnd"; 
} else if ($.browser.mozilla) { 
    vP = "-moz-"; 
    transitionEnd = "transitionend"; 
} else if ($.browser.opera) { 
    vP = "-o-"; 
    transitionEnd = "oTransitionEnd"; 
} 

function animate(object, cssProperties, callback, ms) { 
    if (!ms) { 
     ms = speed; 
    } 

    if (Modernizr.csstransitions) { 
     object.css(vP+"transition", "all "+ms+"ms ease-in-out"); 

     object.css(cssProperties); 

     if ($.isFunction(callback)) { 

      object.bind(transitionEnd,function(){ 
       object.unbind(transitionEnd); 
       callback(); 
      }); 

     } 

    } else { 
     if ($.isFunction(callback)) {  
      object.animate(cssProperties, ms, callback); 
     } else { 
      object.animate(cssProperties, ms);   
     } 
    } 
}

然後調用它像這樣：animate($("#someID"),{"left":"100px"});

看一看http://css3.bradshawenterprises.com/legacy/的更詳細一點。

來源

2011-06-08 14:16:54

代碼豐富的代碼片段。我的問題的答案真的是'webkitTransitionEnd'事件，當我在這個線程中提出這個事件時，我就知道這個事件。你在這裏使用的jQuery包裝器也非常棒。我可能會嘗試將它調好一點點，並儘快與你分享:) – Hady 2011-06-09 10:50:03

這真是太棒了 - 我想在某個時候將它製作成適當的插件，但還沒有機會。 – 2011-06-09 10:57:58

與jQuery（animate）的最佳方式ü可以做：

function moveTo100(){ 
    $('#box').animate({ 
    left: '+=100', 
    top: '+=100' 
    }, { 
    duration: 2000, 
    specialEasing: { 
     width: 'linear', 
     height: 'easeOutBounce' 
    }, 
    complete: moveTo200 
    }); 
} 

function moveTo200(){ 
    $('#box').animate({ 
    left: '+=100', 
    top: '+=100' 
    }, { 
    duration: 3000, 
    specialEasing: { 
     width: 'linear', 
     height: 'easeOutBounce' 
    } 
    }); 
}

Ofcourseü可以添加其他效果和類型的緩和。

來源

2011-06-08 12:30:03 Urosan

對不起Urosan如果我不清楚，但我需要使用-webkit-的解決方案動畫，以便在osX上獲得流暢的動畫。我很高興使用JavaScript助手方法來添加類，啓動其他轉換等，但不是一個完整的jQuery動畫解決方案 – Hady 2011-06-08 13:51:31

哦，我明白了。那麼也有jQuery的webkit轉換動畫http://plugins.jquery.com/project/webkit-transform如果你有興趣 – Urosan 2011-06-08 14:30:51

最簡單的方式實現，這將是...

$('#box').click(function(){ 
    $(this).addClass('translate1').bind("webkitTransitionEnd", function() { 
     $(this).addClass('translate2') 
    }) 
});

http://jsfiddle.net/ALhym/

有一些問題，你的示例代碼，我想真正的版本沒有他們，但translate2具有與translate1相同的屬性，並且-webkit-transition：全部23個易用;缺少持續時間內的單位，這是必需的。

來源

2011-06-08 15:27:32 Duopixel

這是動畫關鍵幀的用途。下面是一個使用懸浮僞類的例子。

@-webkit-keyframes Move{ 
    0% { 
        -webkit-transform: translate(0px,0px); 
    } 
    40% { 
        -webkit-transform: translate(100px,100px); 
    }      
    100%{ 
        -webkit-transform: translate(200px,200px); 
    } 
} 

div:hover { 
    -webkit-animation-name: Move; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-fillmode: forward; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
}

如果你有興趣在CSS動畫較長的教程，這裏是你真正呈現一個完整的CSS Animation tutorial

來源

2011-06-08 22:02:02

您提示我在運行時使用javascript生成關鍵幀CSS聲明的想法。我對關鍵幀的問題是，一旦動畫結束，它立即重置。 – Hady 2011-06-09 06:08:07

這就是fillmode的用途。當您將它設置爲fillmode：forward時，它會保留最終的關鍵幀。 – 2011-06-09 17:13:28

連鎖webkit動畫

回答

相關問題