138.高度为auto的元素使用vue的transition效果

一次设计师，要实现一个从下往上滑出的效果，但滑出的元素高度是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 是没有过渡效果的。