Vue - 转换期间文本溢出 div

Question

I have created a transition in Vue, one DIV moves left to right, whilst the other, next to it, expands to fill the page.

When the transition is toggled, when the DIV moving left to right, out of the page I am having an issue where its jerky and the text in the DIV overflowing out of the side in view.

Have a look at the Codepen here for an example: https://codepen.io/BONDJAMES/pen/NWGBGez

How do I remove the 'jerkiness' and stop the text overflowing out of the div when the transition is triggered?

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

To prevent the text being rendered outside of its container when the container is too small, simply use overflow:hidden :

.toggleContainerLeftWidth_Half {
   overflow: hidden;
}

The "jerkiness" is caused by having padding or border values on the transitioned element. You're trying to transition to a total width of 0 , but the total width is actually width + padding + border . So you'll get a jump after animation ends (when the element is removed from DOM).

The solution is to have a wrapper and move any border/padding values on inner element, so the outer one can smoothly transition to a total width of 0 by changing width . Also, use overflow:hidden on the outer one.

Here's a simplified version of what you have: https://codepen.io/andrei-gheorghiu/pen/WNQKoxQ

A minor detail is I chose to switch from animating width to animating flex-grow as I find it cleaner. Another option is to animate flex-basis .

The main point here being: when you use display:flex , width (or height for vertical) is only the starting value for flexbox calculation and it's overridden by flex-basis . Hence, the element is not guaranteed to end up with a computed width value equal to the value specified by CSS width (unless you prevent flexbox from being a "flex-box" by telling it: don't grow, don't shrink. At which point... why use display:flex ? display:block already does that and it's the default value for <div> s).

One last thing: I also added a min-width on the inner element to prevent text wrapping during the animation. Remove if not wanted.