v-if / v-show를 사용하지 않고 vue로 이행

v-if / v-show를 사용하지 않고 vue로 이행

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

언급URL : https://stackoverflow.com/questions/63691560/vue-transitions-without-having-to-use-v-if-v-show