CSS анимации, действующие странно

Работа над проектом хобби, чтобы узнать некоторые html, css и js.CSS анимации, действующие странно

Была попытка решить проблему с анимацией css, действующей странно. После первой итерации она иногда появляется или исчезает в середине анимации, а в других случаях она просто мигает, чтобы ускориться. Пробовал в нескольких браузерах и нескольких компьютерах/устройствах, все тот же результат.

JSFiddle here (некоторый код удален) и в реальном маштабе времени пример here.

index.html

... 
<body onload="init()"> 
<div class="leftanimation">Cool Gliding Text</div> 
<div class="leftanimation">Lorem Ipsum Dolor Sit</div> 
<div class="leftanimation">How Cool Is This?</div> 
<div class="leftanimation">Wwiiiieeee! </div> 
<div class="leftanimation">Sssssswwwwoooosssshhh!</div> 
<div class="leftanimation">Drive by text!</div> 
<div class="leftanimation">More example text ...</div> 
<div class="leftanimation">Last test text.</div> 
...

script.js

function init() { 

    var a = document.getElementsByClassName("leftanimation"); 

    for (i = 0; i < a.length; i++){ 
     a[i].addEventListener("animationiteration", updateAnim); 
    } 
} 

function updateAnim() { 

    this.style.left = Math.random() * 7 + "%"; 
    //this.style.transform = "rotate(-90deg) translate(0px, " + Math.random() * 50 + 10 + "px)"; 
    this.style.fontSize = Math.floor(Math.random() * 100) + 30 + "px"; 
    this.style.opacity = Math.random() * 0.5; 
    this.style.animationDuration = Math.floor(Math.random() * 30) + 20 + "s"; 
    if (Math.floor(Math.random() * 2) == 1) { 
     this.style.animationDirection = "normal"; 
    } else { 
     this.style.animationDirection = "reverse"; 
    } 
}

style.css

.leftanimation { 
    position: fixed; 
    transform: rotate(-90deg); 
    transform-origin: 5% 50%; 
    animation: glide 0.01s infinite; 
    animation-direction: alternate; 
    backface-visibility: hidden; 
    white-space: nowrap; 
    opacity: 0; 
    font-size: 20px; 
    z-index: -2; 
} 

@keyframes glide { 
    0% { top: -150%; animation-timing-function: ease-in-out; } 
    100% { top: 250%; animation-timing-function: ease-in; } 
}

Любые идеи WH y это ведет себя так?

Update

Странное поведение, кажется, исчезают, если удалить animationDuration из updateAnim(). Но это не решает мою проблему, так как я хочу, чтобы анимация была рандомизирована.
Возможно, это слишком много для обработки анимации css?

источник

2016-04-09 Richard Lindholm

Только несколько советов. Если вы используете addEventListener(), вы должны собрать их в массиве, чтобы удалить их, если необходимо.

var eventListener = []; 
element.addEventListener(event,callback,false); 
eventListener.push([element,event,callback]);

Чтобы удалить их просто цикл по массиву:

while(var current = eventListener.pop()){ 
    current[0].removeEventlistener(current[1],current[2]); 
}

Это просто научиться правильно с самого начала.

И:

Math.floor(Math.random() * 2) == 1

должен быть

Math.floor(Math.random() * 2) === 1

Если я вижу, исправить вашу проблему происходит при установке animationDirection. Он переключает состояние по умолчанию, заданное css, и после этого запускает новую анимацию с обратным порядком.

Попробуйте спрятать элемент и установить начальную позицию, с которой должна начинаться анимация. После этого покажите элемент и запустите анимацию. Может быть, оберните animationStart в

setTimeout(function(){ 
    // setAnimationProperty etc 
},0);

источник

2016-04-09 18:20:36 user2429266

вместо 'Math.floor (Math.random() * 2) === 1' вы могли бы просто использовать' math.random() <0.5' – vahanpwns

@ user2429266 Спасибо за советы, всегда оценили. Анимация является частью фона, поэтому я буду ленив и не удаляю eventlisteners. Я знаю, что обработка ресурсов важна. Проблема была там до того, как я начал менять анимацию. И скрывать текст до того, как я изменю свойства, похоже, не работает (не уверен, что я спрятал его должным образом, хотя). –

@ vahanpwns Я буду использовать это, но я изменю его на '>' хе-хе. –

CSS анимации, действующие странно

ответ

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