Question

我遇到的问题是我的产品代码将事件transitionend绑定到一个元素。但Chrome 33，Safari 7.0.2＆amp; 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上运行。

非常感谢！

Safari 7.0.2＆amp ;;上没有触发事件transitionend。 Safari 6.1

0 个答案: