Webkit transitionEnd事件分組

我有一個HTML元素，我已經附加了一個webkitTransitionEnd事件。Webkit transitionEnd事件分組

function transEnd(event) { 
    alert("Finished transition!"); 

} 

var node = document.getElementById('node'); 
node.addEventListener('webkitTransitionEnd', transEnd, false);

然後，我繼續改留下了CSS和頂級性能，如：

node.style.left = '400px'; 
node.style.top = '400px';

這將導致DIV順利地移動到新的位置。但是，當它結束時，會出現2個警告框，而我在動畫結束時期待只有一個。當我改變CSS左邊的屬性時，我得到一個警告框 - 所以這意味着對樣式的兩個改變被註冊爲兩個單獨的事件。我想將它們指定爲一個事件，我該怎麼做？

我無法使用CSS類同時應用這兩種樣式，因爲左側和頂部的CSS屬性是我只能在運行時才知道的變量。

來源

2010-10-31 karter

如果您使用的是webkit，我假設您正在爲跨平臺訪問調動Web應用程序。

如果是這樣，你認爲在Web應用程序表示層抽象了跨平臺訪問？

Webkit並未在移動設備上提供本機外觀，但這是新技術可以提供幫助的地方。

來源

2010-10-31 17:13:00 user492851

不，我主要針對谷歌瀏覽器。現在，我只想讓它在那裏工作。 – karter 2010-11-01 15:59:59

檢查propertyName事件：

function transEnd(event) { 
    if (event.propertyName === "left") { 
     alert("Finished transition!"); 
    } 
} 

var node = document.getElementById('node'); 
node.addEventListener('webkitTransitionEnd', transEnd, false);

這樣的話，那麼其會在「左」屬性只完成了火災。如果兩個屬性設置爲相同的持續時間和延遲，這可能效果最好。此外，如果只更改「左」或兩者，這將起作用，但如果只更改「頂」，則而不是。

或者，你可以使用一些掛羊頭賣狗肉的定時器：

var transEnd = function anon(event) { 
    if (!anon.delay) { 
     anon.delay = true; 

     clearTimeout(anon.timer); 
     anon.timer = setTimeout(function() { 
      anon.delay = false; 
     }, 100); 

     alert("Finished transition!"); 
    } 
}; 

var node = document.getElementById('node'); 
node.addEventListener('webkitTransitionEnd', transEnd, false);

這應該確保你的代碼將運行最多1次每100ms。您可以更改setTimeout延遲以滿足您的需求。

來源

2010-12-14 22:14:22 Pauan

只是刪除事件：

var transEnd = function(event) { 
    event.target.removeEventListener("webkitTransitionEnd",transEnd); 
};

將火爲第一屬性，而不是爲別人。

來源

2011-09-07 01:41:54 shi

從我的角度來看代碼的預期行爲將

觸發只有當最後的過渡已經完成的任何財產上
支持過渡警報
支持1，2，許多轉換無縫

最近，我一直在爲由CSS時序驅動的頁面轉換管理器工作。

這是觀念

// Returs the computed value of a CSS property on a DOM element 
// el: DOM element 
// styleName: CSS property name 
function getStyleValue(el, styleName) { 
    // Not cross browser! 
    return window.getComputedStyle(el, null).getPropertyValue(styleName);  
} 

// The DOM element 
var el = document.getElementById('el'); 

// Applies the transition 
el.className = 'transition'; 

// Retrieves the number of transitions applied to the element 
var transitionProperties = getStyleValue(el, '-webkit-transition-property'); 
var transitionCount = transitionProperties.split(',').length; 

// Listener for the transitionEnd event 
function eventListener(e) { 
    if (--transitionCount === 0) { 
     alert('Transition ended!'); 
     el.removeEventListener('webkitTransitionEnd', eventListener); 
    } 
} 

el.addEventListener('webkitTransitionEnd', eventListener, false);

你可以在這裏測試this implementation或（容易）jQuery version，無論是Webkit的工作只

來源

2012-12-04 10:33:43 Davide

如果您在JQuery的喜歡它，嘗試了這一點。注意事件參數存儲事件對象並在相應的函數中使用。

$("#divId").bind('oTransitionEnd transitionEnd webkitTransitionEnd', event, function() { 
    alert(event.propertyName) 
});

來源

2012-12-07 21:01:16

該事件應該在函數中傳遞，否？像... '$（「＃divId」）。bind（'transitionEnd'，function（event）{ alert（event.propertyName） }）;'' – 2013-05-23 17:09:44

Webkit transitionEnd事件分組

回答

相關問題