-
- 慕仙6782529 2018-12-03
- 过度效果主要是利用了transition和transform里的translate，两个页面之间的切换并没有用帧动画，而是直接利用了添加class （transform.translate -100%）以及top100%相互抵消
-
截图0赞 · 0采集
-
- 慕UI5236663 2018-12-03
第二页，top: 0, 5.5秒上移top: -100%;
第三页 top: 100%; 0, 5.5秒上移top: -100%;
- 0赞 · 1采集
-
- qq_妖狐_0 2017-07-20
- #page2.fadeOut中间没有空格的，表示在一个元素上，这个元素包括这个id和这个类 #page2 .fadeOut 中间用空格隔开，表示后代选择器 #page2,fadeOut中间以逗号隔开，表示同级
- 0赞 · 0采集
-
- 慕工程2957023 2016-12-01
- 在body属性中设置overflow:hidden; 防止溢出有滚动条出现。 js函数在上一节已经做过笔记，此处只记录fadeIn和fadeOut两个类 #page2 { display: block; -webkit-transition: .5s; transition: .5s; } #page2.fadeOut { opacity: .3; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } #page3 { display: none; -webkit-transition: .5s; transition: .5s; } #page3.fadeIn{ -webkit-transform: translate(0, -100%); transform: translate(0, -100%); }
- 0赞 · 0采集
-
- 山海连风 2016-02-25
- translate(,)分别是水平与竖直方向。 http://www.imooc.com/wiki/detail/id/3265
- 0赞 · 0采集
-
- 侠客岛的含笑 2016-02-16
- body属性中设置overflow:hidden; 防止溢出有滚动条出现
- 0赞 · 2采集
-
- sandogeek 2016-02-12
- 防止出现滚动条，需要添加 overflow:hidden.
- 0赞 · 0采集
-
- 李晓健 2016-02-12
- 让第二页和第三页同时显示，并且向下偏移100%，就是正好向下偏移出整个屏幕，又因为body的高度为屏幕的高度，overflow: hidden; 所以偏移出屏幕的内容，也就是第三页就直接消失，并且不会影响当前页面的内容。
-
截图2赞 · 2采集
-
- 李晓健 2016-02-12
- page3.setAttribute('class','page fadeIn'); 这里为什么是'page fadein' 不是 'fadein'呢？因为page3本身就有一个page的class，如果直接写fadeIn的话，那page3就只有fadeIn的样式，page的class就没有了，所以要一起加上。当然这里也可以用其他的方法，page3.classList.add('fadeIn'); 这样写的话就类似于JQUERY的addClass，不需要考虑之前的class，当然这个也就兼容性问题。 兼容性可以参考 http://sentsin.com/web/190.html
-
截图2赞 · 1采集
-
- 李晓健 2016-02-12
- transform: translate(0,-100%); 这是让内容从下面往上出现
-
截图2赞 · 1采集
-
- 李晓健 2016-02-11
- 防止出现滚动条，需要添加 overflow:hidden.
-
截图1赞 · 1采集
-
- 李晓健 2016-02-11
- 这个5.5S是怎么算出来的？首先 #page2 > .p2_bg_loading 这个loadding有个1S的动画效果，然后就是那个全圈的转动时间，时间最长的是外圈，等待3S转动1S，就耗时4S，加上前面loadding就是5S，因为#page2有个0.5S的过度，所以加起来就是5.5S。
-
截图1赞 · 1采集
-
- 李晓健 2016-02-11
- 这时是0.5S，老师一时口快说成了5S
-
截图2赞 · 0采集
-
- 李晓健 2016-02-11
- 这里先把page1 page2 page3获取到，放到三个变量中，在后面的操作中可以直接使用，对性能也是有好处的，不需要每一次操作时都去重新获取一次，js对dom的操作也是非常消耗性能的。
-
截图1赞 · 0采集
-
- darcygail 2016-02-09
- overflow:hidden隐藏超出的
- 0赞 · 0采集
-
- hhh112123123 2016-02-05
- overflow:hidden; 防止滚动条的出现，实际作用隐藏溢出
- 1赞 · 0采集
-
- lynhao 2016-02-04
- 太心急了我，原来老师后面讲到了~(*^__^*)
-
截图0赞 · 0采集
-
- 慕斯卡7752168 2016-02-04
- 在body属性中设置overflow:hidden; 防止溢出有滚动条出现。 js函数在上一节已经做过笔记，此处只记录fadeIn和fadeOut两个类 #page2 { display: block; -webkit-transition: .5s; transition: .5s; } #page2.fadeOut { opacity: .3; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } #page3 { display: none; -webkit-transition: .5s; transition: .5s; } #page3.fadeIn{ -webkit-transform: translate(0, -100%); transform: translate(0, -100%); }
- 1赞 · 0采集
数据加载中...