时间戳

首页 > 解决方案 > 过渡中的Vue过渡在错误的地方结束过渡

javascript - 过渡中的Vue过渡在错误的地方结束过渡

问题描述

我正在尝试在另一个具有自己的过渡的“父”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
    }
  }
})

标签： javascriptvue.jsvuejs2

解决方案

只是稍微调整一下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%);
}

推荐阅读