<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>菜单展出动画</title>

    <style>

        html,body{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        ul{

            padding: 0;

            margin: 0;

            overflow: hidden;

            background-color: bisque;

        }

        ul li{

            height: 60px;

            line-height: 60px;

            text-align: center;

            list-style: none;

            cursor: pointer;

        }

        ul li:hover{

            background-color: aquamarine;

        }

        .show{

            animation: show 1s ease-in-out forwards;

        }

        .hide{

            animation: hide .3s forwards;

        }

        @keyframes show {

            from{

                height: 0px;

            }

            to{

                height: 240px;

            }

        }

        @keyframes hide {

            from{

                height: 240px;

            }

            to{

                height: 0px;

            }

        }

        #toggle{

            position: absolute;

            z-index: 10;

            padding: 10px 20px;

        }

    </style>

</head>

<body>

    <input type="submit" value="切换" id="toggle">

    <ul class="show">

        <li>

            <a>首页</a>

        </li>

        <li>

            <a>首页</a>

        </li>

        <li>

            <a>首页</a>

        </li>

        <li>

            <a>首页</a>

        </li>

    </ul>

    <script>

        const toggle = document.querySelector("#toggle");

        const ul = document.querySelector("ul")

        toggle.addEventListener("click",function(){

            if(getComputedStyle(ul).height=="0px"){

                ul.classList.remove("hide")

                ul.classList.add("show");

            }else{

                ul.classList.remove("show")

                ul.classList.add("hide");

            }

        },)

    </script>

</body>

</html>

[js] - 导航展出动画的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  3. 应用app首次进入导航页动画

    import android.content.Intent; import android.os.Bundle; import android.support.v7.app.AppCompatActi ...

  4. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  5. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  6. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  7. GSAP JS基础教程--动画的控制及事件

    好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...

  8. 基于js全屏动画焦点图幻灯片

    今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="sl ...

  9. easing.js让页面动画丰富起来

    jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. <scr ...

  10. JS模拟CSS3动画-贝塞尔曲线

    一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...

随机推荐

  1. Javascript Ajax总结——跨域资源共享

    XHR对象只能访问与包含它的页面位于同一个中的资源.这种安全策略可以预防某些恶意行为.CORS(Cross-Origin Resource Sharing,跨域资源共享)是W3C的一个工作草案,定义了 ...

  2. CTFHub XSS DOM反射 WriteUp

    前言:本文需要注册一个xss平台,以接收xss反弹回来的数据,请自己在互联网上寻找合适的xss平台 1. 构造闭合语句 根据题目提示,判断网站存在DOM xss漏洞 查看页面源代码,发现关键位置,其中 ...

  3. Kubernetes架构及安装

    K8s架构 k8s内部是有几个组件的,分别是controller manager,api-server,scheduler,kubelet以及etcd,kube-proxy还有k8s客户端kubect ...

  4. 初探 Linux Cgroups：资源控制的奇妙世界

    Cgroups 是 linux 内核提供的功能,由于牵涉的概念比较多,所以不太容易理解.本文试图通过简单的描述和 Demo 帮助大家理解 Cgroups . 如果你对云原生技术充满好奇,想要深入了解更 ...

  5. 十分钟从入门到精通（下）——OBS权限配置

    上一篇我们介绍了OBS权限管理中统一身份认证和企业项目管理,本期我们继续介绍OBS权限管理中的高级桶策略和ACL应用.   您是否也遇到过类似的问题或者困扰? 1.隔壁的主账户给了子用户创建一个桶,但 ...

  6. 干货时间：聊聊DevOps下的技术系列之契约测试

    摘要:本期和大家简单聊聊在服务交互场景下使用服务契约的重要性,以及契约管理的必要性,最后简单介绍了下契约测试. 1.服务交互带来的问题 在上一篇文章中,我们系统的列举了DevOps各个流程中常用的测试 ...

  7. gitblit 不使用远程头像的方法

    gitblit 安装非常简单,使用也很方便,由于我初次使用,遇到一个小问题,头像加载不出来,很影响系统的速度,网上找了很久,终于找到了解决办法. 1.仓库分组:创建仓库设定名称时录入:groupNam ...

  8. 火山引擎 ByteHouse 与白鲸开源完成兼容性认证，加速数据价值释放

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 数据作为新型生产要素,已快速融入生产.分配.流通.消费和社会服务管理等各环节,深刻改变着生产方式.生活方式和治理方 ...

  9. 新变化新营销 这些知识点你得 Get！（文末有 PPT 福利首次放送）

      更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 在刚刚结束的第 7 期火山引擎数智平台 VeDI「增长课堂」上,火山引擎数智平台 VeDI 零售行业解决方案. ...

  10. Solon Aop 特色开发（6）新鲜货提取器，提取Bean的函数进行定制开发

    Solon,更小.更快.更自由!本系列专门介绍Solon Aop方面的特色: <Solon Aop 特色开发(1)注入或手动获取配置> <Solon Aop 特色开发(2)注入或手动 ...