三（3-4、3-5）标题栏和菜单栏的实现

最新推荐文章于 2022-07-05 22:05:39 发布

qiaoxinlin

最新推荐文章于 2022-07-05 22:05:39 发布

阅读量214

点赞数

分类专栏： book_demo

本文链接：https://blog.csdn.net/weixin_45540782/article/details/102966322

版权

book_demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

右侧在嵌套一个布局

引用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) /* 进入之前在屏幕外 包含着。。 ，随着方向位移 */
  }