vue 过渡而无需使用 v-if / v-show答案

【问题标题】：vue transitions without having to use v-if / v-showvue 过渡而无需使用 v-if / v-show
【发布时间】：2020-12-20 19:09:24
【问题描述】：

一个简短的问题，因为我是 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>

【问题讨论】：

标签： vue.js dom css-transitions vuex vue-transitions

【解决方案1】：

直接将动画 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>

【讨论】：