发表于: 2017-07-28 00:59:29

5 636


今天完成的事情:先看了点js,之后看了师兄们的日报,找了 normalize看了看,并使用了它,然后把之前用框架写的部分用自己的scss改好,之后想做一个侧面弹窗按钮那就做喽

首先我在最顶部放了一个多选按钮,然后用label包住菜单图标,绑定多选按钮图标,然后利用css3的checked选择器就可以实现,点一次触发,再点一次关闭的效果了。

但是在调试过渡动画过程中发生了两个问题(一下代码为没有改正前的部分)

1.

&+.sidebar+.master{
 .menu{
margin-left: 215px;

}

}

.menu{
display: inline-block;
。。。
margin-left: 15px;

。。。

transitionmargin-left 1s;
}

这样的话刚加载页面,页面会先做一个从margin-left 0 -> 15px 的动画

如果我把

transitionmargin-left 1s;

放在上面哪个触发选择器里就不会了,但是我并没有理解原理,明明用

transition: width 1s;

也不会有width: 0 ->xxx的动画啊,求解

2.当我给一个模块上了display: none 后在触发的选择器改变display: block这样该模块我设置的过渡效果会全部消失,如下

/*sidebar*/
.sidebar{
background-color: #FFF;
position: fixed;
top: 0;
left: 0;

z-index: 100;

display:none

...

}

&+.sidebar{
transition: width 2s
display: block;
width: 200px;
}

这样不会有任何的过渡效果,求师兄解答,后来我换了一种办法才解决的,我用index:-1然后设置index:100这样就有过渡效果了,但是还是不明白前面是为啥。

明天计划的事情:完成剩下的
遇到的问题: 如上
收获:resetcss 侧边栏如何实现。。。说实话最近实在有点划水,,事情有点多


返回列表 返回列表
评论

    分享到