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