No.1 - 制作一个简单的菜单动画效果---百度IFE

最新推荐文章于 2021-06-28 22:35:34 发布

weixin_30381317

最新推荐文章于 2021-06-28 22:35:34 发布

阅读量126

点赞数

原文链接：http://www.cnblogs.com/cndotabestdota/p/9083200.html

版权

最近比较闲，在家做点训练

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>