Перед вами код, который при загрузке страницы рубит нужный текст на отдельные символы, а при вызове функции textAnimate() каждой букве которая теперь является отдельный элементом присвоится класс в котором прописана анимация. Суть проблемы такова в Хроме и в опере все почти норм, а в мазиле вообще капец, теперь конкретней, когда вызывается textAnimate(), она должна успеть присвоить всем элементам (то есть буквам), нужный класс примерно за 600ms с маленьким хвостиком так как какое то время еще потеряется на само выполнение, которое на любом из перечисленных браузеров получается примерно 150ms. Но вот проблема в том что такая общая цифра 150ms получается только если не использовать setTimeout() а в место него каждый раз без ожидания вызывать showLetter(), тогда вся операция проходит за 100-150ms и все буквы получают класс фактически одновременно, и в таком случае нужного эффекта анимации уже нет, а когда использую setTimeout()даже с нулевым значением в качестве задержки время выполнения в хроме и опере примерно 1100ms, плохо ну ещё куда не шло, но в мазиле около 2500ms, а при таком раскладе анимашка уже совсем не та(. Прошу у знающих людей совета, как выйти на нужное время, а также почему так происходит что не так с setTimeout(). Спасибо за ваши ответы.
` var timeout = 600;
(function(){
var
descriptions = $('.slider__image-description'),
titles = descriptions.find('h2'),
technologists = descriptions.find('p');
//функция подготовит текст к анимации порубает на отдельные буквы все что надо
function fraction(e){
e.forEach(function(item){
item.each(function(){
var that = $(this);
var string = that.text();
that.html(string.replace(/./g, '<span class="letter">$&</span>'));
});
});
return;
}
fraction([titles, technologists]);
})();
function textAnimate(that){
var
letterList = that.find('.letter'),
listLength = letterList.length,
i = 0;
(function showLetter(){
var currentLetter = $(letterList[i]).html();
//если это пробел зададим ему фиксированную ширину иначе потом он сплющиться
if (currentLetter === ' ') {
var letterWidth = $(letterList[i]).width();
//если ширина пробела = 0, значит это конец строки и нужно вставить елемент переноса строки
if (letterWidth == 0) {
$(letterList[i]).after('<br>');
}
$(letterList[i]).width(letterWidth);
}else{
//добавим клас с анимацией
$(letterList[i]).addClass('showLetter');
}
i++;
setTimeout(function(){
if (i < listLength) {
showLetter();
}
}, timeout/listLength);
})();
}`
transition-delay
, если это "класс с анимацией"?