Css transition и setTimeout - PullRequest
Новая
       7

Css transition и setTimeout

0 голосов
/ 17 октября 2019

У меня есть элемент сообщения, который я добавляю на свою страницу в функции: 

 const markup = `<div class="todolist__message todolist__message${status? "--ok":"--err"}">${msg}</div>`;

    elements.tdl.insertAdjacentHTML('beforeend', markup);

    if(fade) {
        const message = document.querySelector('.todolist__message');

        // Change the message opacity
        message.style.opacity = '0';

        // Remove the message element
        setTimeout(() => {
            document.querySelector('.todolist__message').parentElement.removeChild(message);
        }, 2000);
    }

и добавляю свойства css: 

    opacity: 1;
    transition: opacity 1s;

Что я не понимаюпочему, когда я изменяю непрозрачность сообщения на 0, переход не работает, и элемент мгновенно исчезает?

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

const markup = `
    <div class="todolist__message todolist__message${status? "--ok":"--err"}">${msg}</div>
`;

elements.tdl.insertAdjacentHTML('beforeend', markup);

if(fade) {

    setTimeout(() => {
        const message = document.querySelector('.todolist__message');

        // Change the message opacity
        message.style.opacity = '0';

        // Remove the message
        setTimeout(() => document.querySelector('.todolist__message').parentElement.removeChild(message), 2000);
    }, 2000);
}

Кто-нибудь возражает, объясняя, почему первый блок кода приводит кв сообщении, мгновенно исчезающем, а не в применяемом переходе css?

Спасибо

** См. ответ ниже, чтобы узнать, как удалить элементы после завершения анимации.

Ответы [ 3 ]

0 голосов
/ 17 октября 2019

Проблема в том, что вы пытаетесь применить opacity: 0 одновременно, вы применяете переход. Чтобы transition работать;сначала нужно добавить класс перехода и добавить opacity в setTimeout.

0 голосов
/ 18 октября 2019

Для всех, кто заинтересован, второй тайм-аут и удаление элемента должны быть заменены слушателем события transitionend для элемента, который вызывает метод, который удаляет элемент после завершения анимации, а не синхронизирует setTimeouts с анимациейзадержка + продолжительность: 

window.addEventListener(this.whichTransitionEvent(), function(e) {
    if(e.target.classList.contains('todolist__message')) {
        toDoListView.deleteMessage(e.target);
    }
});

Функция удаления: 

export const deleteMessage = element => {
    if(element) {
        element.parentElement.removeChild(element);
    }
};

И функция Дэвида Уолша для проверки префиксов: 

whichTransitionEvent() {
    let t;
    const el = document.createElement('fake-element');
    const transitions = {
        'transition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'MozTransition': 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd'
    }

    for(t in transitions) {
        if(el.style[t] !== undefined)
            return transitions[t];
    }
}

Я думаю, что я сделал этоверно - похоже, работает в любом случае!

0 голосов
/ 17 октября 2019

Это работает: 

var msg = "hello World";

const markup = `
    <div class="todolist__message todolist__message">${msg}</div>
`;

wrapper.innerHTML = markup;
btn.addEventListener('click', function() {

        const message = document.querySelector('.todolist__message');

        // Change the message opacity
        message.style.opacity = '0';

        // Remove the message
        setTimeout(() => document.querySelector('.todolist__message').parentElement.removeChild(message), 2000);
});
.todolist__message {
  transition: opacity 1s;
}
<div id="wrapper"></div>
<button id="btn">delete</button>
...