製品のコードがイベントtransitionend
を要素にバインドするという問題が発生しました。ただし、このイベントは Chrome 33、Safari 7.0.2、および Safari 6.1 ではトリガーされません。私のコードは Firefox 27.0.1 で正常に動作します。私のコードは、Chrome の古いバージョン (25 や Safari の 6.0.5 など) でもうまく機能していました。
だから私はこの問題を再現し始めました。以下は再現コードです。
<p>The box below combines transitions for: width, height, background-color, transform. Hover over the box to see these properties animated.</p>
<div class="box"></div>
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
document.querySelector('.box').addEventListener('webkitTransitionEnd', function () {
console.log('Transition End.');
}, false);
document.querySelector('.box').addEventListener('msTransitionEnd', function () {
console.log('Transition End.');
}, false);
document.querySelector('.box').addEventListener('oTransitionEnd', function () {
console.log('Transition End.');
}, false);
document.querySelector('.box').addEventListener('transitionend', function () {
console.log('Transition End.');
}, false);
jsFiddle: http://jsfiddle.net/PPRJX
再生コードは Safari 7.0.2 では機能しません。ただし、Chrome 33 では動作します。
コードを最新の Chrome と Safari で動作させたい。transitionend
私の再生コードから、 Safari では動作せず、Chrome では動作することがわかります。しかし、私の製品では、Chrome でも動作しません。
どうもありがとうございました!