Vue переход в переходе, завершающий переход в неправильном месте

Question

Я пытаюсь добавить переход к дочернему div в другой «родительский» div с собственным переходом, однако, похоже, есть проблема с дочерним переходом.

Кажется, что происходит дочерний переход путается с родительским переходом и завершает переход в неправильном месте.

Эффект, который я пытаюсь получить, заключается в том, что при нажатии кнопки дочерний контейнер A (на виду) выдвигается влево, а дочерний Контейнер B появляется после дочернего контейнера A справа.

Я воспроизвел проблему здесь: https://codepen.io/BONDJAMES/pen/mdegmMe

Как сдвинуть дочерний контейнер A влево , с дочерним контейнером B, скользящим в поле зрения после дочернего контейнера A, справа, после переключения?

HTML

<div id="app">
  <div class="viewBlocks">
    <transition name="slide">
      <div class="left" v-if="!MaxView">
        <div class="subContainer">
          <div class="container">
            ...
          </div>
        </div>
      </div>
    </transition>

    <transition name="slide">
      <div class="right">
        <div class="subContainer">
          <button @click="toggleBtn">Toggle</button>
          Parent DIV
          <div class="container">
            <transition name="first-slide">
              <div v-if="!showMiniB" class="miniContainerA">

                <button @click="slideDivs">Slide A out - B In</button>
                Child Container A
              </div>
            </transition>

            <transition name="second-slide">
              <div v-if="showMiniB" class="miniContainerB">
                <button @click="slideDivs">Slide B out - A</button>
                Child Container B
              </div>
            </transition>

          </div>
        </div>
      </div>
    </transition>
  </div>
</div>

CSS

body {
     margin: 0;
}
 * {
     box-sizing: border-box;
}
 .viewBlocks {
     display: flex;
}
 .viewBlocks > * {
     flex: 1 1 0%;
     overflow: hidden;
}
 .viewBlocks .subContainer {
     margin: 10px;
     background-color: white;
     min-height: 200px;
     padding: 1rem;
    /* prevent text wrapping during transition? */
     min-width: 300px;
}
 .viewBlocks .left {
     background-color: blue;
}
 .viewBlocks .right {
     background-color: red;
}
 .viewBlocks .container {
     background-color: white;
}
 .slide-leave-active, .slide-enter-active {
     transition: 1s cubic-bezier(0.5, 0, 0.3, 1);
}
 .slide-leave-to, .slide-enter {
     flex-grow: 0;
}

.miniContainerA{
  border: green 3px solid;
  text-align: center;
  height: 60px
}

.miniContainerB{
  border: pink 3px solid;
  text-align: center;
  height: 60px
}

.first-slide-enter {
  opacity: 0;
  transform: translatex(-100%);
  transition: all 0.7s ease-out;
}
.first-slide-enter-to {
  opacity: 1;
  transform: translatex(0);
  transition: all 0.7s ease-out;
}
.first-slide-leave-to {
  opacity: 0;
  transform: translatex(-100%);
  transition: all 0.7s ease-out;
}

.second-slide-enter {
  opacity: 0;
  transform: translatex(0);
  transition: all 0.7s ease-out;
}
.second-slide-enter-to {
  opacity: 1;
  transform: translatex(-100%);
  transition: all 0.7s ease-out;
}
.second-slide-leave-to {
  opacity: 0;
  transform: translatex(0);
  transition: all 0.7s ease-out;
}
.second-slide-leave {
  transform: translatex(-100%);
}

VUE

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

Answer 1

Это просто вопрос настройки css бит

для miniContainerA и miniContainerB (используя только div в примере ниже), вам нужно привязать к вершине. Вы можете сделать это, разместив родительский элемент как absolute, а дочерние элементы (miniContainers) relative

.viewBlocks .container {
     background-color: white;
   position: relative;
   top: 0;
}

.viewBlocks .container div{
     background-color: yellow;
   position: absolute;
   top: 0;
   left:0;
   width:100%;
}

, затем отрегулируйте процент перехода (добавленный 100% к вашим значениям translatex)

.second-slide-enter {
  opacity: 0;
  transform: translatex(100%);
  transition: all 0.7s ease-out;
}
.second-slide-enter-to {
  opacity: 1;
  transform: translatex(0%);
  transition: all 0.7s ease-out;
}
.second-slide-leave-to {
  opacity: 0;
  transform: translatex(100%);
  transition: all 0.7s ease-out;
}
.second-slide-leave {
  transform: translatex(0%);
}