Question

我在Vue中创建了一个过渡，一个DIV左右移动，而另一个在其旁边扩展以填充页面。

当切换切换时，当DIV左右移动时，我遇到了一个问题，即它的抖动和DIV中的文本从侧面溢出。

在这里查看Codepen的示例：https://codepen.io/BONDJAMES/pen/NWGBGez

触发过渡时，如何消除“混浊”并阻止文本溢出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%
}

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>

VueJS

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

Answer 1

要防止文本在容器太小时在其容器外呈现，只需使用overflow:hidden：

.toggleContainerLeftWidth_Half {
   overflow: hidden;
}

“混乱”是由于在过渡元素上具有padding或border值而引起的。您正在尝试转换为0的总宽度，但总宽度实际上是width + padding + border。因此，动画结束后（从DOM中删除元素时），您将获得跳跃。

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

。

这是您所拥有内容的简化版本：https://codepen.io/andrei-gheorghiu/pen/WNQKoxQ

我选择了一个较小的细节，从动画width切换到动画flex-grow，因为我觉得它更干净。另一种选择是为flex-basis设置动画。

这里的要点是：当您使用display:flex时，width（或垂直使用height）只是flexbox计算的起始值，并且被flex-basis覆盖。因此，不能保证元素的最终宽度等于CSS width指定的宽度（除非您通过告诉它使flexbox成为“ flex-box” ：不要增长，不要收缩，这时...为什么要使用display:flex？display:block已经做到了，这是<div> s的默认值。）

最后一件事：我还在内部元素上添加了min-width，以防止在动画过程中自动换行。如果不需要，请删除。

Vue-过渡期间文本溢出div

1 个答案: