Применить анимацию CSS к каждому элементу массива

Я хочу отобразить div, где текст переходит и изменяется каждые 4 секунды. У меня есть текст, который меняется каждые четыре секунды, но анимация не применяется. Как исправить эту проблему?Применить анимацию CSS к каждому элементу массива

Вот JS скрипку с моим кодом: https://jsfiddle.net/zm1dxybr/2/

CSS:

.fadeInDownExit{ 
    -webkit-animation: fadeInDownExit 8s linear alternate; 
    -o-animation: fadeInDownExit 8s linear alternate; 
    animation: fadeInDownExit 8s linear alternate; 
} 

@keyframes fadeInDownExit { 
    0%, 100% { 
     opacity: 0; 
     -webkit-transform: translateY(0px); 
     -moz-transform: translateY(0px); 
     -ms-transform: translateY(0px); 
     -o-transform: translateY(0px); 
     transform: translateY(0px); 
    } 

    10%, 90% { 
     opacity: 1; 
     -webkit-transform: translateY(20px); 
     -moz-transform: translateY(20px); 
     -ms-transform: translateY(20px); 
     -o-transform: translateY(20px); 
     transform: translateY(20px); 
    } 

}

JQuery:

var text = ["Welcome", "Hi", "Sup dude"]; 
var counter = 0; 
setInterval(change, 4000); 
    function change() { 

         $('#changeText').html(text[counter]).addClass('fadeInDownExit'); 
    counter++; 
    $('#changeText').html(text[counter - 1]).removeClass('fadeInDownExit'); 
    if(counter >= text.length) { counter = 0; } 
    }

источник

2017-01-17 Rimil Dey

Вы видели ошибку в консоли –

Нет ошибок. Просто анимация не применяется –

Является ли класс меняет чек с элементом проверки –

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>toggleClass demo</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
    <style> 
 
    div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #ccc; 
 
    } 
 
    .big-blue { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #00f; 
 
    } 
 
    </style> 
 
    <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
    
 
<div></div> 
 
    
 
<script> 
 
$("div").click(function() { 
 
    $(this).toggleClass("big-blue", 1000, "easeOutSine"); 
 
}); 
 
</script> 
 
    
 
</body> 
 
</html>

источник

2017-01-17 06:39:10

Это выглядит в коде извлекая имя класса сразу происходит, попробуйте использовать следующий код:

var text = ["Welcome", "Hi", "Sup dude"]; 
 
var counter = 0; 
 
var intervalstop; 
 
setInterval(change, 8000); 
 
function change() { 
 
    $('#changeText').html(text[counter]).addClass('fadeInDownExit'); 
 
    counter++; 
 
    intervalstop = setInterval(removepclass, 4002); 
 
    if(counter >= text.length) { counter = 0; } 
 
    } 
 
    
 
function removepclass() { 
 
    clearInterval(intervalstop); 
 
    $('#changeText').removeClass('fadeInDownExit'); 
 
    }

источник

2017-01-17 06:56:53

Попробуйте это отлично работает

var text = ["Welcome", "Hi", "Sup dude"]; 
var counter = 0; 
setInterval(change, 4000); 
function change() { 
$('#changeText').html(text[counter]).toggleClass('fadeInDownExit'); 
counter++; 
$('#changeText').html(text[counter - 1]); 
if(counter >= text.length) { counter = 0; } 
    }

источник

2017-01-17 06:58:50

Я обновил js, так как нам не нужно добавлять класс каждый раз для анимации:

var text = ["Welcome", "Hi", "Sup dude"]; 
var counter = 0; 
setInterval(change, 4000); 
function change() { 

    $('#changeText').html(text[counter % text.length]); 
    counter++; 
}

https://jsfiddle.net/zm1dxybr/5/

источник

2017-01-17 06:59:52 bhansa

Он не применяет переход ко всем элементам. –

Он работает для всех элементов в текстовом массиве, см. Ссылку jsfiddle, и что это за «все элементы»? – bhansa

Применить анимацию CSS к каждому элементу массива

ответ

Смежные вопросы