Question

请查看下一个fiddle并帮助我了解为什么在Firefox中，警报未被触发。

HTML

<div class="test1">TEST1</div>

CSS

.test1 {
    opacity: 0;
    width: 300px;
    height: 150px;
    background-color: blue;
    transition: opacity 0.2s 0 ease-in;
    &.fade-in {
        opacity: 1
    }

}

JS

    $(".test1").ready(function(){
        $(".test1").one("webkitTransitionEnd transitionend MSTransitionEnd oTransitionEnd transitionEnd", function(event){
        alert("transition fired");
        if ( event.target == event.currentTarget ) {
            alert(event.target);
        }
        });
        setTimeout(function(){
            $(".test1").addClass("fade-in");
        },1000);
    });

更新了代码和小提琴

Answer 1

添加-moz- at defor of animation property

-moz-transition: PROPERTY or CSS CLASS NAME .3s ease;

例如： -moz-transition：width .3s ease;

-moz-transition: fade-out .3s ease;

css3 transitionend不会在firefox上触发

1 个答案: