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