Блог

Краткий вопрос, поскольку я новичок в переходах Vue. Мой вопрос в том, возможно ли применить переход к элементу / компоненту без его повторного рендеринга. Следовательно, не с использованием v-if или v-show. Мой вариант использования — это расширение и сжатие компонента div нажатием двух разных кнопок в строке заголовка, поэтому я не хочу, чтобы элемент повторно отображался при переходе. Спасибо за ответы!

из приведенного ниже кода я хочу применить переход expand при нажатии кнопки «развернуть» и отменить переход с помощью кнопки «свернуть»

 <template>   
<transition  name="expand">     
<div>         
<div class="title-bar-controls" @mousedown.stop>           
<Button aria-label="Minimize" @click="windowToggle('minimize')"></Button>           
<Button aria-label="Maximize" @click="windowToggle('maximize')"></Button>           
<Button aria-label="Close" @click="hideContainer"></Button>         
</div>     
</div>   
</transition>
  

Напрямую привязывает класс анимации CSS к вашему окну.

Как показано ниже (привязки minimize или maximize ).

 new Vue ({
  el:'#app',
  data () {
    return {
      classes: ''
    }
  },
  methods: {
    windowToggle(name) {
      this.classes = name
    }
  }
})  

 @keyframes animate-minimize {
  from {width: 400px; height: 400px;}
  to {width: 0px; height: 0px;}
}

@keyframes animate-maximize {
  from {width: 0px; height: 0px;}
  to {width: 400px; height: 400px;}
}

.minimize {
  width: 0px;
  height: 0px;
  animation-name: animate-minimize;
  animation-duration: 2s;
  border:solid 1px;
}

.maximize {
  width: 400px;
  height: 400px;
  animation-name: animate-maximize;
  animation-duration: 2s;
  border:solid 1px;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
   
<div>         
  <div class="title-bar-controls" @mousedown.stop>           
    <Button aria-label="Minimize" @click="windowToggle('minimize')">-</Button>           
    <Button aria-label="Maximize" @click="windowToggle('maximize')">[]</Button>           
    <div :class="classes">

    </div>
  </div>     
</div>   

</div>