[js] - 导航展出动画
<!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] - 导航展出动画的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- 应用app首次进入导航页动画
import android.content.Intent; import android.os.Bundle; import android.support.v7.app.AppCompatActi ...
- 用原生JS写移动动画案例及实际应用
js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
- 基于js全屏动画焦点图幻灯片
今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="sl ...
- easing.js让页面动画丰富起来
jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. <scr ...
- JS模拟CSS3动画-贝塞尔曲线
一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...
随机推荐
- ElasticSearch之cat segments API
命令样例如下: curl -X GET "https://localhost:9200/_cat/segments?v=true&pretty" --cacert $ES_ ...
- 一个Tomcat 如何部署多个项目?附多种解决方案及详细步骤!
此文源自一次多年前面试的面试题,民工哥将它总结出来分享给大家,希望对大家有所帮助,或者今后的面试中说不定会用的上. 首先,我们了解一下常见的Java Web服务器. Tomcat:由Apache组织提 ...
- P1967 [NOIP2013 提高组] 货车运输 做题记录
套路题了. 根据和角公式 \(\mathrm{\sin (\alpha + \beta) = \sin \alpha \cos \beta + \cos \alpha \cos \beta, \cos ...
- Terraform 的开源替代:OpenTofu 宣布 GA!
OpenTofu 社区于1月10日宣布 OpenTofu 项目 GA,这是 OpenTofu 的首个稳定版本(https://github.com/opentofu/opentofu/releases ...
- 文心一言 VS 讯飞星火 VS chatgpt (29)-- 算法导论5.2 1题
一.在 HIRE-ASSISTANT 中,假设应聘者以随机顺序出现,你正好雇用一次的概率是多少?正好雇用 n 次的概率是多少? 文心一言: 讯飞星火: 华为盘古: 在HIRE-ASSISTANT中,假 ...
- 网络知识一箩筐:IP地址划分的那些知识点
摘要:IP地址是怎么划分的呢?划分的依据是什么呢?本节小课将带你一起学习IP地址划分.子网划分.子网掩码.CIDR等网络基础概念,了解IP地址划分背后的那些故事. 首先,回忆一下,前面小课中我们有提到 ...
- 案例解读华为隐私计算产品TICS如何实现城市跨部门数据隐私计算
摘要:本文介绍华为可信智能计算服务TICs是如何助力城市跨部门数据实现隐私计算的. 本文分享自华为云社区<基于华为隐私计算产品TICS实现城市跨部门数据隐私计算,助力实现普惠金融>,作者: ...
- 对象存储只能按文件名搜索,你out了吧
摘要:不少大公司的一个桶里都是几亿几十亿的对象,那他们都是怎么检索的呢? 本文分享自华为云社区<对象存储只能按文件名搜索? 用 DWR + ElasticSearch 实现文件名.文件内容.图片 ...
- 云图说丨带你了解GaussDB(for Redis)双活解决方案
摘要:GaussDB(for Redis)推出了双活解决方案,基于GaussDB NoSQL统一架构,通过两个数据库实例之间的数据同步,达成数据的一致性. 本文分享自华为云社区<[云图说]一张图 ...
- 关于HTTPS认证,这里解决你所有疑惑
摘要:从签发证书到数据加密交互,按流程的进展讲解HTTPS认证过程内容和原理. 本文分享自华为云社区<故事+图文,一次性解决你对HTTPS认证过程的所有疑惑>,作者:breakDraw. ...