0

我已经阅读了 vue 转换文档，并且非常清楚如何将它们应用于所需的元素。但是当一个新的孩子（绿色）被添加/删除到一个弹性列时，如何使父容器（灰色）的高度变化平滑？我试图从 0 开始为新孩子的最大高度设置动画，但没有工作。这是我的情况：

小提琴：链接

代码：

HTML

<html>

<body>
  <div id="app" class="demo">
   <div>
      <button v-on:click="on=!on">
        toggle
      </button>
    </div>
    <div class="background">
      <div class="container">
        <transition name="fade-outin" mode="out-in">
          <red v-if="on"></red>
          <blue v-else></blue>
        </transition>
        <transition name="fade-down">
          <div v-if="!on">
            <div style="height: 25px"></div>
            <green></green>
          </div>
        </transition>
      </div>
    </div>
  </div>
</body>
</html>

JS

var red = {
    template: "<div style='width:150px; height:150px; border:10px solid red;'></div>"
};

var blue = {
    template: "<div style='width:150px; height:150px; border:10px solid blue;'></div>"
};

var green = {
    template: "<div style='width:150px; height:150px; border:10px solid green;'></div>"
};

var app = new Vue({
  el: '#app',
  data: {
    on: true
  },
  components: {
    red,
    blue,
    green
  }
})

CSS

body {
  padding: 20px;
}
.background {
  border: 1px solid #000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.container {
  background-color: #abc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.fade-outin-enter-active, .fade-outin-leave-active {
  transition: opacity 0.5s ease-in-out;
}
.fade-outin-enter, .fade-outin-leave-to {
  opacity: 0;
}

.fade-down-enter-active {
  transition: all 0.5s ease-in-out 0.5s;
}
.fade-down-leave-active {
  transition: all 0.5s ease-in-out;
}
.fade-down-enter, .fade-down-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-65px);
}

谢谢你的时间，

H25E

4

1 回答 1

1

您不能将过渡与 一起使用height: auto，CSS 需要一个值来应用过渡。

在这种情况下，您必须使用max-heightfor 为您的组件设置动画。有关更多详细信息，请参阅本文：https ://dev.to/sarah_chima/using-css-transitions-on-the-height-property-al0

我对您的代码进行了一些更改。尝试这样的事情，但你可以改进：

<html>

<body>
  <div id="app" class="demo">
   <div>
      <button v-on:click="toggle">
        toggle
      </button>
    </div>
    <div class="background">
      <div class="container" ref="container">
        <transition name="fade-outin" mode="out-in">
          <red v-if="on"></red>
          <blue v-else></blue>
        </transition>
        <transition name="fade-down">
          <div v-if="!on">
            <div style="height: 25px"></div>
            <green></green>
          </div>
        </transition>
      </div>
    </div>
  </div>
</body>
</html>

var red = {
    template: "<div style='width:150px; height:150px; border:10px solid red;'></div>"
};

var blue = {
    template: "<div style='width:150px; height:150px; border:10px solid blue;'></div>"
};

var green = {
    template: "<div style='width:150px; height:150px; border:10px solid green;'></div>"
};

var app = new Vue({
  el: '#app',
  data: {
    on: true
  },
  components: {
    red,
    blue,
    green
  },
  methods: {
    toggle() {
      if (this.on) {
        this.$refs.container.style['max-height'] = '500px';
      } else {
        this.$refs.container.style['max-height'] = '170px';
      }  
      this.on = !this.on;
    }
  }
})

.container {
  background-color: #abc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  max-height: 170px;
  transition: max-height 3s;
}
于 2020-05-19T13:32:38.640 回答