在更改布尔值时转换 div答案

【问题标题】：Transition a div on changing a boolean value在更改布尔值时转换 div
【发布时间】：2022-01-27 16:59:55
【问题描述】：

我正在使用布尔值 editMode 更改卡片模式。现在，当editMode === true 一些内容出现在 child div 中时，这给了 parent div 更多的高度和宽度。当 editMode 等于 true 时，我想过渡到 parent div 的这种扩展。我正在开发 vue.js。

我该怎么做？

<div class="parent">
    <h2> Card Title </h2>
    <div class="child" v-if="editMode">
        some content including inputs, labels, ...
    <div>
    <button @onClick="editMode = !editMode"/>
</div>

【问题讨论】：

你遇到了什么问题？
嗨@CreativeLearner 在这样的示例中（w3schools.com/css/tryit.asp?filename=trycss3_transition2），转换触发悬停或激活按钮或div。我的问题是如何使用布尔变量触发它？
我添加了一个答案。希望这会有所帮助！

标签： javascript html css vue.js css-transitions

【解决方案1】：

我通过使用 vuetify-transitions 解决了这个问题。问题是父潜水本身在另一个包装器组件中，我可以通过提供包装器转换来解决它。

【讨论】：

【解决方案2】：

工作演示：

new Vue({
  el: '#app',
  data: {
    editMode: true
  }
})

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="parent">
    <h2> Card Title </h2>
    <transition name="fade" :css="true">
      <div class="child" v-if="editMode">
          some content including inputs, labels, ...
      </div>
    </transition>
    <button v-on:click="editMode = !editMode">Click Me!</button>
  </div>
</div>

【讨论】：

@Terry，看起来你错误地评论了这个答案。我没有问这个问题。
我的错。但是，我看不出这与 OP 的代码有何不同？
@CreativeLearner 这段代码的过渡在哪里？我不明白这是如何解决我的问题的。
@aliforooghie，我更新了答案。希望它会有所帮助！谢谢。
首先感谢您回答@CreativeLearner。这个问题的答案是整个 div 不涉及过渡。我想转换到“父”组件而不是子组件，因为父组件中有多个子 div。