0

製品のコードがイベント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 でも動作しません。

どうもありがとうございました!

4

0 に答える 0