右侧在嵌套一个布局
引用global中的mixin布局
实现title和menu是否隐藏
transition动画原理
因为 slide-down和slide-up 代码过于重复,可以把slide写到global.scss当中
.slide-down-enter, .slide-down-leave-to {
transform: translate3d(0, -100%, 0) /* 进入之前在屏幕外 包含着。。 ,随着方向位移 */
}
.slide-down-enter-to, .slide-leave-leave,
.slide-up-enter-to, .slide-up-leave {
transform: translate3d(0, 0, 0) /* 进入之后回到原位 */
}
.slide-down-enter-active, .slide-down-leave-active,
.slide-up-enter-active, .slide-up-leave-active {
transition: all .3s linear; /* 使用transition css3的一个动画属性, 第一个参数是监听所有的变化,
第二个实现0.3秒,第三个动画的一个显示方式;我们采用线性的动画*/
}
.slide-up-enter, .slide-up-to {
transform: translate3d(0, 100%, 0) /* 进入之前在屏幕外 包含着。。 ,随着方向位移 */
}