Javascript Vue-转换期间从div溢出的文本

我在Vue中创建了一个转换，一个DIV从左向右移动，而它旁边的另一个DIV扩展以填充页面

当切换转换时，当DIV从左向右移动，离开页面时，我遇到了一个问题，即它的抖动和DIV中的文本溢出视图的一侧

以代码笔为例：

触发转换时，如何消除“抖动”并阻止文本溢出div

CSS

.viewContainerLeft {
  float: left;
  height: 100%;
  padding: 10px;
}

#subContainerRight {
  height: unset;
  padding: 10px 15px 15px 15px;
}

.subContainer {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  background-color: white !important;
  min-height: 200px;
  width: 100%
}

.toggleContainerLeftWidth_Full {
  /display: none;
  width: 50%;
  transition: 1s;
  background: blue
}

.toggleContainerLeftWidth_Half {
  width: 50%;
  transition: 1s;
  background: blue;
}

.toggleContainerRightWidth_Half {
  width: 50%;
  transition: 1s;
  background: red;


}

.toggleContainerRightWidth_Full {
  width: 100%;
  transition: 1s;
  background: red;
}

.viewContainerRight {
  float: right;
  padding: 10px;

}

.viewContainer {
  padding: 10px;
}

.viewBlocks {
  height: 100%;
  width: 100%;
  display: flex;
}


.verticalSlide-leave-active,
.verticalSlide-enter-active {
  transition: 1s;   
}
.verticalSlide-leave-to {
  transform: translate(-100%, 0);
  width: 0%

}
.verticalSlide-enter {
  transform: translate(-100%, 0);
  width: 0%
}

var app = new Vue({
  el: '#app',
  data: () => ({
    MaxView: false
  }),
  methods: {
    toggleBtn(){
      this.MaxView = !this.MaxView
    }
  }
})

HTML

<div id="app">

      <div class="viewBlocks">
        <transition name="verticalSlide">
          <template v-if="!MaxView">
            <div :class="{
                        toggleContainerLeftWidth_Half: !MaxView,
                        toggleContainerLeftWidth_Full: MaxView
                      }" class="viewContainerLeft">
              <div class="subContainer" >
                <div class="container">
                  Hide When Toggle
                </div>
              </div>
            </div>
          </template>
        </transition>

        <transition name="verticalSlide">
          <template>
            <div class="viewContainerRight" :class="{
                        toggleContainerRightWidth_Half: !MaxView,
                        toggleContainerRightWidth_Full: MaxView
                      }">
              <div id="subContainerRight" class="subContainer">
                <button @click="toggleBtn">Toggle</button>
                <div class="container">
                  Keep Open Test
                </div>
              </div>
            </div>
          </template>
        </transition>

      </div>
    </div>

---

当容器太小时，为了防止文本在其容器外呈现，只需使用

溢出：隐藏
：

.toggleContainerLeftWidth_Half {
   overflow: hidden;
}

“抖动”是由于在转换的元素上有
填充
或
边框
值造成的。您试图转换到总宽度为
0
，但总宽度实际上是
宽度
+
填充
+
边框
。因此，在动画结束后（当元素从DOM中移除时），您将得到一个跳跃

解决方案是使用包装器并移动内部元素上的任何边框/填充值，这样外部元素可以通过更改
宽度
平滑地过渡到总宽度
0
。另外，在外部使用
overflow:hidden

以下是您所拥有内容的简化版本：

一个次要的细节是，我选择从设置
width
动画切换到设置
flex grow
动画，因为我发现它更干净。另一个选项是设置
flex basis
动画

这里的要点是：当您使用
display:flex
时，
width
（或
height
表示垂直）只是flexbox计算的起始值，它被
flex basis
覆盖。因此，不能保证元素的计算宽度值等于CSS
width
指定的值（除非您阻止flexbox成为“flexbox”）告诉它：不要增长，不要收缩。在这一点上…为什么要使用
display:flex
？
display:block
已经这样做了，它是
的默认值）

最后一件事：我还在内部元素上添加了一个
minwidth
，以防止在动画过程中出现文本换行。如果不需要，请删除。
如果容器太小，为了防止文本在其容器外呈现，只需使用
溢出：隐藏
：

.toggleContainerLeftWidth_Half {
   overflow: hidden;
}

“抖动”是由于在转换的元素上有
填充
或
边框
值造成的。您试图转换到总宽度为
0
，但总宽度实际上是
宽度
+
填充
+
边框
。因此，在动画结束后（当元素从DOM中移除时），您将得到一个跳跃

解决方案是使用包装器并移动内部元素上的任何边框/填充值，这样外部元素可以通过更改
宽度
平滑地过渡到总宽度
0
。另外，在外部使用
overflow:hidden

以下是您所拥有内容的简化版本：

一个次要的细节是，我选择从设置
width
动画切换到设置
flex grow
动画，因为我发现它更干净。另一个选项是设置
flex basis
动画

这里的要点是：当您使用
display:flex
时，
width
（或
height
表示垂直）只是flexbox计算的起始值，它被
flex basis
覆盖。因此，不能保证元素的计算宽度值等于CSS
width
指定的值（除非您阻止flexbox成为“flexbox”）告诉它：不要增长，不要收缩。在这一点上…为什么要使用
display:flex
？
display:block
已经这样做了，它是
的默认值）

最后一件事：我还在内部元素上添加了一个
minwidth
，以防止在动画过程中出现文本换行。如果不需要，请移除