vue.js - 如何使用Vue transition 来扩展和收缩一个div

Question

使用 Vue，我有两个 div，我想通过转换切换它们。我想在单击时慢慢将 div 扩展到我想要的宽度，然后在再次单击时缩小。我可以让 div 在一次点击时展开，但无法弄清楚如何在第二次点击时缩小它。

不太清楚是否仅指定 div 的宽度就足够了，或者我是否还必须在 css 过渡类中指定相同的宽度。

这个 fiddle 展示了我一直在尝试的东西: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>

Answer 1

你可以这样做，添加类“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;
}

你可以看到正在工作的 fiddle HERE

PS 我没有从 fiddle 中删除不必要的类。