一次設計師，要實現一個從下往上滑出的效果，但滑出的元素高度是auto。

先解釋一下為什麼這裡是auto？
因為它是一個圖示列，我們高度不應該寫死，不然擴充套件性不好。誰知道後面是否要新增圖示？

這裡的實現出了什麼問題呢？

當我們不能確定一個元素的高度的時候，transition是不會觸發過渡效果的。比如auto，它會一瞬間變為auto的效果。失去了過渡效果。

錯誤的過渡程式碼

<template>
  <div>
    <button class="trigger-button" @click="menuVisible=true">一開始就顯示的按鈕</button>
    <transition name="menu-slide">
      <div v-if="menuVisible" class="menu-wrap">
        <button @click="menuVisible=false">關閉</button>
        <header class="menu-header">緩緩往上的結構</header>
        <ul class="menu-list">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuVisible: false,
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="css">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}
.trigger-button {
  position: fixed;
  right: 0;
  bottom: 20%;
}
.menu-wrap {
  overflow: hidden;
  position: fixed;
  right: 0;
  bottom: 20%;
  background: #eee;
  height: auto;
}
.menu-slide-enter,
.menu-slide-leave-to {
  height: 0;
}
.menu-slide-enter-to,
.menu-slide-leave {
  height: auto;
}
.menu-slide-enter-active,
.menu-slide-leave-active {
  transition: .5s ease-out;
}
</style>
 

上述程式碼發現並無過渡效果，0.5s後，按鈕組是直接出現的，並不是緩緩向上出現，緩緩向下隱藏的。

稍作改動，即可達到我們的效果。

既然auto無效，我們就使用一個maxHeight；我們所想要的是可擴充套件性好，那麼，我們將maxHeight設定一個我們永遠達不到的高度值即可！！

這裡要注意，maxHeight的值越大，它0.5s所要變化的高度就越多，即變化的速度越快~~~

正確的過渡程式碼

.menu-slide-enter,
.menu-slide-leave-to {
  max-height: 0;
}
.menu-slide-enter-to,
.menu-slide-leave {
  max-height: 250px;
}
.menu-slide-enter-active,
.menu-slide-leave-active {
  transition: .5s ease-out;
}
 

總結

不是所有css樣式都有過渡效果。只有具備中間屬性的值的屬性才具備過渡效果。

如上，從 height:0; 到 height:auto;s 是沒有過渡效果的。