No.1 - 制作一个简单的菜单动画效果---百度IFE
最近比较闲，在家做点训练
http://ife.baidu.com/course/detail/id/18?t=1527144851578#learn
CSS3新特性，兼容性，兼容方法总结
https://www.cnblogs.com/jesse131/p/5441199.html
课程概述
作业提交截止时间：09-01
关于此课程
此课程按照简单到难的顺序一共有八个任务，由浅入深的带大家了解 Web 动效落地方法 。完成这八道题，你会掌握如下技能：
- 熟练掌握 CSS transition 、transform 、animation 的用法 ;
- 怎么从一份动效标注 去 100% 还原 CSS 动画 ;
- 学会使用常用的 前端动画开源库 。
课程适用人群
- 你需要具备一定 HTML、CSS 开发基础；
- 你对 动效设计概念 有一定的了解，既知道怎么做，也知道为什么要这么做；
- 你需要具备熟练使用
git|github的能力。
作者有话说
- 在后续的一段时间，我会陆续在我的知乎专栏公布题目的写法和详细分析。https://zhuanlan.zhihu.com/uxelement
- 建议你在看我的方法之前，尽量先自己先实现，我的方法不一定比你的好。也欢迎你在完成课程的闲暇，贡献自己的学习笔记。毕竟总结沉淀才是最好的学习方法。
- 如果你对本课程有任何意见，或者你跟我一样是个爱猫人士的话，欢迎来我的知乎勾搭~我们可以聊聊技术（养猫）心得：）
下面进入本学院第一个任务
任务目的
- 熟悉 CSS3 过渡子属性
- 通过 JavaScript 触发过渡效果
- 理解语义化，合理地使用 HTML 标签来构建页面
任务描述
- 通过 CSS transition 实现如下效果：
视频demo - 每次点击【切换样式】按钮的时候，出现视频 demo 所示的动画效果。
- 学有余力的同学可以研究一下，如何通过修改贝塞尔曲线，让这个动效更贴近自然。
任务注意事项
- CSS transition 的各项子属性（时间曲线）等详细值可以自由定义；
- 注意浏览器中的兼容性；
- HTML 及 CSS 代码结构清晰、规范；
- 代码中含有必要的注释；
在线学习参考资料
1：行内元素水平居中 text-align:center;
2：button样式
button{ padding: 0; border: none; font: inherit; color: inherit; background-color: transparent; /* show a hand cursor on hover; some argue that we should keep the default arrow cursor for buttons */ cursor: pointer; } .btn{ background-color: #fff; border: 1px solid #ccc; border-radius:4px; padding: 0.5em 1em; margin-top: 5px; }
3：transition4个属性
transition: width 0.5s ease-out 1s;
4:Cannot set property 'width' of undefined?
这个问题不是CSS的问题，而是一个纯javascript的问题。 你的css写得没错，问题出在Javascript当中的 getElementsByClassName("aa")，这个方法得到的是一个由class="aa"的所有元素组成的集合，而不是单个元素； 集合是没有display属性的，集合中的元素才有display属性。当你试图做 集合.style.display的时候，自然会报错。 所以你这个问题的解决方案应该是：遍历集合中所有的元素，然后给每个元素都加上display="none"的属性。示例代码如下： window.onload = function (){ divset = document.getElementsByClassName("aa"); for (var i = 0; i<divset.length;i++) { divset[i].style.display="none"; }; }
5:JS修改CSS样式
var obj = document.getElementById("btnB"); ① obj.style.backgroundColor= "black"; ② obj.setAttribute("class", "style2"); https://www.cnblogs.com/susufufu/p/5749922.html（全解）
6：原生JS事件写法
https://www.cnblogs.com/iyangyuan/p/4190773.html
7：伪类after和before的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> button{ padding: 0; border: none; font: inherit; color: inherit; background-color: transparent; /* show a hand cursor on hover; some argue that we should keep the default arrow cursor for buttons */ cursor: pointer; } .btn{ background-color: #fff; border: 1px solid #ccc; border-radius:4px; padding: 0.5em 1em; margin-top: 5px; } div{ text-align:center; } .hr{ width:0; display: inline-block; height: 0px; border-top:1px solid blue; transition: width 0.5s ease-out; } p{ transition: color 0.5s ease-out; } .box{ border:1px solid #ebebeb; padding: 20px 10px; margin:20px; background-color: #f7f6f6; display: inline-block; } .box1{ transform: skew(30deg); } .box2{ transform: scale(0.5,1); } .box3{ transform: rotate(45deg); } .box4{ transform: translate(10px,20px); } .box5{ transform: translate(20px,40px) rotate(45deg) scale(2,1) skew(30deg); } </style> <body> <div> <p>前端学院</p> <div class="hr"></div> <br> <button class="btn" onclick="change()">按钮</button> <br> <div class="box">box0</div> <div class="box box1">box1</div> <div class="box box2">box2</div> <div class="box box3">box3</div> <div class="box box4">box4</div> <div class="box box5">box5</div> </div> </body> <script> function change(){ var hr = document.getElementsByClassName('hr'); var p = document.getElementsByTagName('p'); console.log(hr[0].style.width); if(hr[0].style.width){ hr[0].style.width=null; p[0].style.color="black"; }else{ hr[0].style.width="100px"; p[0].style.color="blue"; } } </script> </html>
cncncn
