使用到vue和bootstrap框架,需要提前导入库
.html
<li class="presentation">
<a @click="show = !show" href="javascript: void(0);">
订单信息
</a>
</li>
<transition name="mybox">
<ul v-if="show" class="nav nav-pills nav-stacked leftUl-color box ">
<li role="presentation"><a href="#">代付款</a></li>
<li role="presentation"><a href="#">代发货</a></li>
<li role="presentation"><a href="#">待收货</a></li>
<li role="presentation"><a href="#">评价</a></li>
<li role="presentation"><a href="#">退款/售后</a></li>
<li role="presentation"><a href="#">已完成</a></li>
</transition>
.js
var vm = new Vue({
el:'#app',
data() {
return {
show: false
}
}
})
.css
/*transition部分↓*/
/*不设置height,则会自动适应*/
.box{
/*内容会被修剪,并且其余内容是不可见的。*/
overflow: hidden;
}
/*显示和隐藏时的过渡效果*/
.mybox-enter-active,.mybox-leave-active{
transition: all 1s ease;
}
/*隐藏后和显示前的样式*/
.mybox-leave-to,.mybox-enter{
max-height:0px !important;
}
/*显示后和隐藏前的样式*/
.mybox-leave,.mybox-enter-to{
max-height: 600px;
}
/*transition部分↑*/
ease,seae-in,ease-in-out,ease-out,效果区别
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。(匀速) |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))(相对于匀速,中间快,两头慢)。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))(相对于匀速,开始的时候慢,之后快)。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))(相对于匀速,开始时快,结束时候间 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))(相对于匀速,(开始和结束都慢)两头慢)。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |