Держите DOM видимым после перехода в vue.js

Question

Я пытаюсь создать переход с кругом, который будет расширяться, чтобы заполнить 100% ширины и высоты контейнера, но я не могу получить DOM остаются видимыми после перехода.

Я в процессе обучения vue.js, поэтому я не уверен, что это предназначено или нет, есть ли способ сохранить круг видимым, когда он расширен до scale(100)? Есть ли лучший способ достичь этого?

HTML:

<div id="app"> 
    <div v-show="show" :transition="zoomCircle" class="circle"></div> 
    <button @click="show = ! show">zoom</button> 
</div> 

ЯШИ:

Vue.transition('zoom', { 
    enterClass: 'zoomOut', 
    leaveClass: 'zoomIn' 
}); 
new Vue({ 
    el: '#app', 
    data: { 
    show: true, 
    zoomCircle: 'zoom' 
    } 
}); 

связанной скрипка: https://jsfiddle.net/joepaulgo/hkfg9vpr/

Answer 1

1. Вы устанавливаете show: false, тем самым скрывая элемент. удалите v-show.
2. Вам вообще не нужен переход Vue (который предназначен для скрытия/отображения элементов/компонентов), используйте привязку класса, чтобы добавить необходимый класс.
3. Если вы хотите, чтобы он оставался в конце формы, вы не должны использовать анимацию CSS, а простой класс CSS с transform: scale(100), потому что анимация возвращается к исходному стилю после их завершения.

К сожалению, я не могу вспомнить правильный CSS, чтобы сделать это с переходом прямо сейчас.

Редактировать: Получено: https://jsfiddle.net/hkfg9vpr/3/