Добавление класса через js не вызовет анимацию CSS

Question

У меня есть измененная версия animate.css (добавлена ​​некоторая задержка, новые временные рамки и новые позиции), и это работает очень хорошо, когда классы установлены по умолчанию (HTML-документ). Но когда я добавляю класс animate динамически через js, анимация не выполняется!

Еще более раздражает то, что в какой-то момент у меня это работало, но я не могу заставить его работать снова (используя gumby framework и inview js, чтобы добавить класс, когда элемент находится на экране (добавление.animated)) . В левом блоке уже есть классы в html, а в правом - класс.animate, добавленный js.

Пример:
http://onepageframework.com/28_2_14/strange_anim.html

Есть идеи, почему правильная коробка не оживляет?

Использование расширения Gumby inview: http://gumbyframework.com/docs/extensions/

Редактировать: добавил HTML:

<div class="six columns text-center fadeInLeftMedium delay_2 animated">
    <!-- left box content here -->
</div>
<div class="six columns text-center fadeInLeftMedium delay_2 inview" data-classname="animated">
    <!-- right box content here -->
</div>

CSS:

.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
       -moz-animation-fill-mode: both;
         -o-animation-fill-mode: both;
            animation-fill-mode: both;
}

.delay_2 {
    -webkit-animation-delay: 2s;
       -moz-animation-delay: 2s;
         -o-animation-delay: 2s;
            animation-delay: 2s;    
}

@-webkit-keyframes fadeInLeftMedium {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-400px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes fadeInLeftMedium {
    0% {
        opacity: 0;
        -moz-transform: translateX(-400px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
@-o-keyframes fadeInLeftMedium {
    0% {
        opacity: 0;
        -o-transform: translateX(-400px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}
@keyframes fadeInLeftMedium {
    0% {
        opacity: 0;
        transform: translateX(-400px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeftMedium {
    -webkit-animation-name: fadeInLeftMedium;
    -moz-animation-name: fadeInLeftMedium;
    -o-animation-name: fadeInLeftMedium;
    animation-name: fadeInLeftMedium;
}

Answer 1

Причина та же: почему вы не можете повторно запускать анимации на основе CSS, просто удалив и добавив класс. Причина в том, что браузеры объединяют эти модификации и оптимизируют анимацию. Причина и решения обсуждаются здесь.

Из статьи ваши варианты (перефразированы):

1. Добавьте небольшую задержку перед повторным добавлением класса (не рекомендуется)
2. Клонируйте элемент, удалите его и вставьте клон
3. Иметь 2 одинаковые анимации (привязанные к различным правилам CSS) и переключаться между ними
4. Запустите перекомпоновку между удалением и добавлением имени класса:

        element.classList.remove("run-animation");
     // element.offsetWidth = element.offsetWidth; //doesn't work in strict mode
        void element.offsetWidth; // reading the property requires a recalc
        element.classList.add("run-animation");

5. Измените (циклически) атрибут CSS animation-play-state элемента на paused или же running (не перезапускает анимацию)

Answer 2

Меняя местами классы, похоже, что он начал работать (аминирован в классе, а fadeInLeftMedium - в качестве имени класса данных):

<div class="six columns text-center fadeInLeftMedium delay_2 animated">
    <!-- left box content here -->
</div>
<div class="six columns text-center animated delay_2 inview" data-classname="fadeInLeftMedium">
    <!-- right box content here -->
</div>

Answer 3

Я думаю, вам просто нужно добавить анимацию как класс, а не как data-classname="animated"...

Итак, в основном:

<div class="six columns text-center fadeInLeftMedium delay_2 inview" data-classname="animated">
    <!-- right box content here -->
</div>

Должно быть:

<div class="six columns text-center fadeInLeftMedium delay_2 inview animated">
    <!-- right box content here -->
</div>

В противном случае анимации не хватает указанной продолжительности анимации, и без указания свойства animation-duration анимация не будет работать.