无需使用v-if / v-show

问题描述

简短的问题，因为我是Vue过渡的新手。我的问题是，是否有可能在不重新渲染元素/组件的情况下应用过渡。因此，不能使用v-if或v-show。我的用例是通过按下两个不同的标题栏按钮来扩展和收缩div组件，因此我不希望在过渡时重新呈现该元素。谢谢答案！

从下面的代码中，我想在按下“最大化”按钮时应用扩展转换，并使用“最小化按钮”反转转换

<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>