No.1 - 制做一个简单的菜单动画效果---百度IFE CSS3新特性，兼容性，兼容方法总结

时间 2019-12-12

标签 no.1 制做一个简单菜单动画效果百度 ife css3 css 特性兼容性兼容方法总结栏目 CSS 繁體版

原文原文链接

最近比较闲，在家作点训练javascript

http://ife.baidu.com/course/detail/id/18?t=1527144851578#learncss

CSS3新特性，兼容性，兼容方法总结

https://www.cnblogs.com/jesse131/p/5441199.htmlhtml

课程概述

做业提交截止时间：09-01前端

关于此课程

此课程按照简单到难的顺序一共有八个任务，由浅入深的带你们了解 Web 动效落地方法。完成这八道题，你会掌握以下技能：java

熟练掌握 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;css3

2：button样式git

    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个属性github

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样式post

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>