发表于: 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;。。。
transition: margin-left 1s;}这样的话刚加载页面,页面会先做一个从margin-left 0 -> 15px 的动画
如果我把
transition: margin-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 侧边栏如何实现。。。说实话最近实在有点划水,,事情有点多
评论