Vue Transitions - как выполнить однократную анимацию включения и выключения

Question

Я создаю заметки с приложением Vue. Редактируемая заметка автоматически сохраняется каждые X секунд. Каждый раз, когда это автоматически сохраняется, я хочу показать маленькое сообщение в нижней части экрана с надписью «Примечание сохранено». Это исчезнет в течение 2 секунд, а затем автоматически исчезнет.

Я делал переходы в Vue раньше, но не включал-выключал, как это. Я могу установить свойство, связанное с элементом с помощью v-if, обернутым в блок перехода. Но тогда мне нужно изменить свойство дважды (true-false)? Должен ли я установить таймер, чтобы дождаться завершения перехода, прежде чем снова установить его в false? Кажется немного хакерским. Какой лучший способ подойти к этому?

Answer 1

Я думаю, что то, что вы описали с помощью v-if, имеет смысл ... вы можете изменить свойство (или данные) в методе v-on:enter для связанного компонента. Это прекрасно изолировало бы поведение от компонента и было бы довольно очевидно для будущего.

Совершенно другим подходом было бы определение одной анимации с ключевыми кадрами, которые переходят из скрытого в отображаемое в скрытое, но это может несколько запутать: что такое переход элемента в отпуск с таким переходом ввода? Хм.