Блог

Главная - Вопросы по программированию - css3 transitionend не запускается в Firefox

css3 transitionend не запускается в Firefox

#javascript #css

#javascript #css

Вопрос:

Пожалуйста, посмотрите на следующую скрипку и помогите мне понять, почему в 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;
    amp;.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);
    });

Обновленный код и скрипта

Ответ №1:

добавить -moz- at для изменения свойства анимации

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

пример:
-moz-переход: ширина.3s простота;

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

Комментарии:

1. Я сделал, в моей программе я использую compass, поэтому я делаю @include transition, который добавляет префиксы всех браузеров. В JSFiddle я добавил то, что вы сказали, но все равно он не срабатывает

2. есть какая-то проблема в коде, скрипка также не работала в Chrome

3. привет, Алон, для эффекта затухания тебе нужно написать ключевые кадры, чтобы получить требуемый эффект анимации

4. добавление класса не вызовет событие?

5. да, потому что процесс просто изменяет уровень непрозрачности, только если вы добавляете ключевой кадр, что означает настройку скорости увеличения непрозрачности