如何使用Vue过渡来扩大和缩小一个div答案

【问题标题】：How to use Vue transition to expand and shrink a div如何使用Vue过渡来扩大和缩小一个div
【发布时间】：2019-09-25 13:59:45
【问题描述】：

使用 Vue，我有两个 div 想要通过转换进行切换。我想在点击时慢慢地将 div 扩展到我想要的宽度，然后在再次点击时缩小。我可以让 div 一键展开，但不知道如何在第二次点击时缩小它。

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

这个小提琴展示了我一直在尝试的东西：https://jsfiddle.net/vxmh8auo/1/

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>

【问题讨论】：

您想扩大和缩小同一个元素，还是想从 DOM 中移除一个元素并在点击时插入另一个元素？
@MarcRo 我想从 DOM 中删除一个元素并插入另一个元素。为此，我试图简化，但我想做的是用组件（宽度较大）替换按钮（宽度较小），并让 div 增长以包含单击时的组件....
更像是在jsfiddle.net/ba38Ln59/1修复小提琴
啊！好的。给两个组件（在它们的 CSS 中）你希望它们具有的最终宽度。在 <transition> 元素中，您可以将 max-width 从 0 转换为任意大的数字。
@MarcRo - 第一个元素是一个按钮，第二个元素应该是一个组件（或者在我的小提琴中是一个包含组件的 div）。仍然不清楚这应该如何工作......我的用例本质上是一个带有搜索图标的按钮，单击该按钮会扩展为包含输入框的搜索组件，用户可以在其中输入搜索内容......

标签： vue.js vuejs2 transition

【解决方案1】：

你可以这样做，添加“默认”类并切换“更大”类：

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

你可以看到工作小提琴HERE

PS 我没有从小提琴中删除不必要的类。

【讨论】：

您不需要为.bigger 重复transition 和transition-property 样式，因为具有bigger 类的任何元素也具有default 类。如果您确实希望扩展比崩溃慢，则只需要transition-duration: 5s。
我越来越近了 - 只是无法弄清楚如何让组件消失并在关闭时被按钮替换：看看这个小提琴：jsfiddle.net/35arL9fn
你看看这个，这就是你想要达到的吗？ jsfiddle.net/6m3zL0ct

【解决方案2】：

这看起来很老套，并且包含很多不必要的类，但它确实有效：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;
}

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

【讨论】：

【解决方案3】：

也许你应该忘记vue对此的支持，只有使用css3才能做到这一点，而且很简单。

首先，这是你的 div 代码

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

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

然后，您可以使用 vue 或 js-dom 或其他任何方式更改 my-div 的宽度，神奇的事情就会发生。

【讨论】：