通过按钮对状态hiddenForm的更改，实现显示隐藏效果。
除了用transition还可以用transition-group
transition中只能接收一个根节点，
transition-group可以接收多个根节点，但是需要key加持,作为唯一标识
//显示时的内容
<transition name="showForm">
<div class="form-container" v-show="!hiddenForm">
<div class="dia_header">新增</div>
<el-button class="btna" circle @click="hiddenForm = !hiddenForm" icon="el-icon-s-unfold">
</el-button>
<div class="main">
123
</div>
</transition>
//隐藏时的内容
<transition name="hiddenForm">
<el-button class="btnb" circle v-show="hiddenForm" @click="hiddenForm = !hiddenForm " icon="el-icon-s-fold">
</el-button>
</transition>
<style>
//按钮的样式
.btna,
.btnb {
position: absolute;
bottom: 0;
background-color: #fff;
// line-height: 38px;
cursor: pointer;
}
.btna {
right: 320px;
}
.btnb {
right: 0px;
}
//进入前，离开后的样式
.showForm-enter,
.showForm-leave-to,
.hiddenForm-enter,
.hiddenForm-leave-to {
transform: translateX(100%);
}
//进入后，离开前的样式
.showForm-enter-to,
.showForm-leave,
.hiddenForm-enter-to,
.hiddenForm-leave {
transform: translateX(0);
}
//进入的动效
.showForm-enter-active {
transition: all 0.3s ease;
}
//离开的动效
.showForm-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.hiddenForm-enter-active {
transition: all 0.3s ease 1s;
}
.hiddenForm-leave-active {
transition: all 0.01s cubic-bezier(1, 0.5, 0.8, 1);
}
</style>
