Vue 전환을 사용하여 div를 확장 및 축소하는 방법

Vue 전환을 사용하여 div를 확장 및 축소하는 방법

Vue를 사용하면 전환과 함께 전환하고 싶은 두 개의 div가 있습니다.클릭할 때 원하는 너비로 div를 천천히 펼친 후 다시 클릭할 때 축소합니다.클릭 한 번으로 div를 확장할 수 있지만 두 번째 클릭으로 축소하는 방법을 찾을 수 없습니다.

div의 너비를 지정하는 것만으로 충분한지, 또는 css 트랜지션클래스에서 같은 너비를 지정하는지도 명확하지 않습니다.

이 바이올린은 제가 시도하고 있는 것을 보여줍니다.https://jsfiddle.net/vxmh8auo/1/

JS

new Vue({
  el: '#app',
  data: {
    showButton: true
  },
  methods: {
    randomise () { this.n = Math.random() }
  },
  components:{'input-div':blah}
});

CSS

.interaction {
  border: 10px solid lightgreen;
  display: flex;
  flex: 1 0 auto;
  max-height: 225px;
  transition: max-height 0.25s ease-out;
}

.default {
   width: 20px;
}
.bigger{
  width: 200px;
}

.expand-enter-active, .expand-leave-active {
  transition-property: width;
  transition-duration: 5s;
 }


.expand-leave-to {
 width: 200px;
}

.expand-enter{
  width: 20px;
}

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div class="interaction">
    <button @click="showButton=!showButton">
     <transition name="expand" mode="out-in">
      <div v-if="showButton" v-bind:class="showButton ? 'default':'bigger'" key="small"> B </div>
      <div v-else class="bigger" key="big"> Bigger </div>
     <!--<input-div><</input-div>-->
      </transition>
    </button>
</div>
</div>

다음과 같이 클래스 'default'를 추가하고 클래스 'bigger'를 전환할 수 있습니다.

  <button @click="toggleBigger">
     <transition name="expand" mode="out-in">
      <div  class="default" v-bind:class="{ bigger: showButton }" key="small"> B </div>

     <!--<input-div><</input-div>-->
      </transition>
    </button>

메서드 toggleBigger 추가.이렇게 하면 읽기 쉬워집니다.

methods: {
    toggleBigger(){
    this.showButton = !this.showButton;
    }

또한 다음과 같이 css 클래스에 직접 전환을 추가합니다.

.default {
  transition: max-height 0.25s ease-out;
   width: 20px;
    transition-property: width;
}
.bigger{
  transition: max-height 0.25s ease-out;
  width: 200px;
  transition-duration: 5s;
   transition-property: width;
}

여기 바이올린을 볼 수 있습니다.

추신 나는 바이올린에서 불필요한 수업을 빼지 않았다.

이것은 매우 hackey이며 불필요한 클래스를 많이 포함하고 있는 것처럼 보이지만, 효과가 있습니다.https://jsfiddle.net/df70pk68/

다시 말씀드리지만 버튼은 입력 상자가 있는 컴포넌트로 확장되었다가 다시 축소됩니다.저의 해결책은 즉시 컴포넌트의 불투명도를 제로로 만든 후 천천히 줄이는 것이었습니다.는 입력 상자가 수축 div의 경계를 넘지 않도록 합니다.누군가 좀 더 우아한 방법을 찾아냈으면 좋겠는데...

HTML

<div id="app">
<div class="interaction">
    <button @click="showButton=!showButton">
     <transition name="fade" mode="out-in">
      <div v-if="showButton" class="default" key="small"> B </div>
      <input-div class="bigger" v-else><</input-div>
      </transition>
    </button>
</div>
</div>

CSS

.interaction {
  border: 10px solid lightgreen;
  display: flex;
  flex: 1 0 auto;
  max-height: 225px;
}

JS

const blah = Vue.component('input-div',{
template: '<div><input type="text" readonly></div>'
});
new Vue({
  el: '#app',
  data: {
    showButton: true
  },
  components:{'input-div':blah}
});

.default {
   width: 20px;
}

.bigger{
   width: 250px;
}


.fade-leave-active {
  transition: all 5s ease;
 }

.fade-leave-to{
  width: 300px;
}
.bigger.fade-leave-to{
  width:20px;
  opacity: 0
}
.bigger.fade-leave-active{
  transition: opacity 0s ease;
  transition: width 5s ease;
}

이 경우 vue의 지원은 잊어버리고 css3만 사용할 수 있으며 매우 간단합니다.

첫째, 이것은 div의 코드입니다.

<div id="my-div"></div>

#my-div{
transition: width 0.5s; /* this is the key code you need */
}

그러면 my-div use vue나 js-dom 등의 폭을 변경할 수 있습니다.매직이 발생합니다.

언급URL : https://stackoverflow.com/questions/58100158/how-to-use-vue-transition-to-expand-and-shrink-a-div