CSS исчезает несколько раз

Question

Я создаю сайт, который позволит вам обновить таблицу SQL, и я хочу добавить какую-то обратную связь при нажатии кнопки. Я сделал невидимую кнопку (opacity = 0), которая находится справа от каждой строки как статус. Я сделал эту функцию JS fade(), чтобы установить непрозрачность на 1, а затем медленно вернет ее в 0, поэтому сообщение появляется, а затем исчезает.

function fade() { 
    var invis = document.getElementById("invis".concat(num.toString())); 
     if(invis.style.opacity > .990) { 
      invis.style.opacity = (invis.style.opacity) - .001; 
      setTimeout(fade, 50); 
     } else if(invis.style.opacity > 0) { 
      invis.style.opacity = (invis.style.opacity) - .05; 
      setTimeout(fade, 50); 
     } 
    } 

Проблема, так как веб-страниц являются однопоточных, любое другое действие будет прерывать анимацию и оставить наполовину утрачен статус. Так что это не хорошо. Поэтому теперь я пытаюсь настроить невидимые кнопки для изменения класса при обновлении новой строки. Новый класс выглядит так:

.invisible_anim { 
    ... 
    opacity: 0; 
    animation:trans 3000ms; 
} 
@keyframes trans { 
    0% { 
     opacity: 1; 
    } 
    50% { 
     opacity: 1; 
    } 

Это прекрасно работает, за исключением того, что он работает только один раз. Отсюда я не могу заставить анимацию играть во второй раз. Я попытался изменить класс обратно на «невидимый», а затем «invisible_anim» без везения. Я также не могу использовать JQuery или Webkit. Мне интересно, есть ли какой-то флаг, который вы можете установить для кнопки без фактического нажатия на нее, чтобы я мог сбросить класс, когда мне нужно? Или даже какой-то способ наполнить мою функцию JS, чтобы я мог придерживаться этого.

Я тоже турбо-нуб, когда дело доходит до этого. Я не касался JS или CSS примерно неделю назад, поэтому, если есть другое решение, о котором я не знаю, не стесняйтесь предлагать альтернативу.

EDIT: Наш бесстрашный герой @Daemedeor спас день. Я добавил слушатель мой статус:

var invis = document.getElementById("invis".concat(num.toString())); 
    invis.addEventListener("animationend", listener, false); 

затем добавили эту прекрасную функцию:

function listener(e) { 
    var invis = document.getElementById("invis".concat(num.toString())); 
    switch(e.type) { 
    case "animationend": 
     invis.className = "invisible"; 
     break; 
    } 
} 

И я получил именно то, что я искал. Какое время быть живым.

Answer 1

Если вы хотели бы играть анимации несколько раз (см docs здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/animation), если вы хотите играть только дважды.

так это:

.invisible_anim { 
... 
opacity: 0; 
animation:trans 3000ms; 
} 
@keyframes trans { 
0% { 
    opacity: 1; 
} 
50% { 
    opacity: 1; 
} 

превратится в

.invisible_anim { 
... 
opacity: 0; 
animation:trans 3s 2 ; 
} 

@keyframes trans { 
0% { 
    opacity: 1; 
} 
50% { 
    opacity: 1; 
} 

EDIT: Видимо требования иначе, чем я думал. Вместо того, чтобы решение, кажется, чтобы ключ от события анимации, расположенный в https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations, а затем, когда эта анимация сделано делать то, что вам нужно сделать: так в JS-только

var e = document.getElementById("watchme"); 
e.addEventListener("animationend", listener, false); 

function listener(){ 
    //do what you need to do here 
} 

Только будьте осторожны, причина этого заключается в том, что большинство браузеров имеют разные события «анимации», которые срабатывают в разное время. Поэтому определенно нужно будет протестировать в разных браузерах, чтобы убедиться, что событие анимации стреляет в нужное время. Там есть сообщение (https://css-tricks.com/controlling-css-animations-transitions-javascript/), в котором описаны некоторые проблемы, с которыми вы можете столкнуться.

Answer 2

Вы должны начать прозрачный затем показать то скрыть:

@keyframes trans { 
    0% { 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 0; 
    } 
} 

Тогда просто добавить класс (удалить после периода 3000ms времени)