Cheeseburger:汉堡菜单导航项目动画(cheeseburger animated)

https://drive.google.com/file/d/1LCS6Z-oP1rqPbRF7tydgVWZEdCEt_RPP/view?usp=sharing这是汉堡菜单导航菜单项上的动画效果。单击汉堡菜单时,每个导航菜单项上都会出现动画。
我尝试重新创建一个。https://codepen.io/coral_Sb/pen/VwmQbLo我不明白哪里出错了?

每次点击汉堡菜单时都会播放动画。

.nav-menu {
  background-color: red;
}
.nav-menu ul li a {
  color: #fff;
  text-decoration: none;
  margin-bottom: 20px;
}
li:first-child {
  animation: bringback 1s 0s forwards;
}
li:nth-child(2) {
  animation: bringback 1s 2s forwards;
}
.nav-menu li:nth-child(3) {
  animation: bringback 1s 3s forwards;
}
.nav-menu li:nth-child(4) {
  animation: bringback 1s 4s forwards;
}
.nav-menu li:nth-child(5) {
  animation: bringback 1s 5s forwards;
}
.nav-menu li:nth-child(6) {
  animation: bringback 1s 6s forwards;
}
.nav-menu li:nth-child(7) {
  animation: bringback 1s 7s forwards;
}
.nav-menu li:nth-child(8) {
  animation: bringback 1s 8s forwards;
}
.nav-menu li:nth-child(9) {
  animation: bringback 1s 9s forwards;
}
.nav-menu li:nth-child(10) {
  animation: bringback 1s 10s forwards;
}
@keyframes bringback {
  to {
    opacity: 1;
    text-indent: 25px;
  }
}
<div class="nav-menu" id="nav-menu">
  <ul id=" check-ul" style="list-style:none">
    <li>
      <!-- class="active1"-->
      <span><img src="images/birla-logo.png" alt=""></span>
    </li>
    <br>
    <li>
      <a xxx="#">Home</a>
    </li>
    <li>
      <a xxx="#">About us <span class="fas fa-sort-down mr-3" style="width: 20px;"></span> </a>
    </li>
    <li>
      <a xxx="#">Curriculum</a>
    </li>
    <li>
      <a xxx="#">Criteria</a>
    </li>
    <li>
      <a xxx="#">Admission Process</a>
    </li>
    <li>
      <a xxx="#">Careers </a>
    </li>
    <li>
      <a xxx="#">Contact us </a>
    </li>
    <li>
      <a xxx="#">Enquire Now </a>
    </li>
  </ul>
</div>
2

不要为任意数量的项目 li:nth-child (N)-硬编码 CSS,这很难维护

顺序交错延迟动画

使用CSS 变量通过使用填充模式both创建交错动画,并使用 CSScalc()中的 CSS 变量控制延迟:

#check-ul li {
  animation: animate 350ms ease calc(var(--i) * 200ms) both;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateX(-2em);
  }
  
  100% {
    opacity: 1;
  }
}
<div class="nav-menu" id="nav-menu">
  <ul id="check-ul">
    <li style="--i:1"><a xxx="#">Home</a></li>
    <li style="--i:2"><a xxx="#">About us</a></li>
    <li style="--i:3"><a xxx="#">Curriculum</a></li>
    <li style="--i:4"><a xxx="#">Criteria</a></li>
    <li style="--i:5"><a xxx="#">Admission Process</a></li>
    <li style="--i:6"><a xxx="#">Careers </a></li>
    <li style="--i:7"><a xxx="#">Contact us</a></li>
    <li style="--i:8"><a xxx="#">Enquire Now</a></li>
  </ul>
</div>

通过按钮点击打开触发菜单动画:

const toggleTarget = (sel) => {
  const EL_targets = document.querySelectorAll(sel);
  EL_targets.forEach(EL => EL.classList.toggle("is-active"));
};
const EL_toggleButtons = document.querySelectorAll("[data-toggle]");
EL_toggleButtons.forEach(EL => EL.addEventListener("click", (ev) => {
  toggleTarget(ev.currentTarget.dataset.toggle);
}));
#nav-menu {
  position: fixed;
  background: #d00;
  color: #fff;
  top: 0;
  left: 0;
  height: 100vh;
  padding: 20px;
  transition: 0.3s;
  transform: translateX(-100%);
}
#nav-menu.is-active {
  transform: translateX(0%);
}
#nav-menu.is-active li {
  animation: animate 350ms ease calc(var(--i) * 100ms) both;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateX(-2em);
  }
  100% {
    opacity: 1;
  }
}
<on type="on" data-toggle="#nav-menu">OPEN MENU</on>
<div id="nav-menu">
  <on type="on" data-toggle="#nav-menu">CLOSE</on>
  <ul>
    <li style="--i:1"><a xxx="#">Home</a></li>
    <li style="--i:2"><a xxx="#">About us</a></li>
    <li style="--i:3"><a xxx="#">Curriculum</a></li>
    <li style="--i:4"><a xxx="#">Criteria</a></li>
    <li style="--i:5"><a xxx="#">Admission Process</a></li>
    <li style="--i:6"><a xxx="#">Careers </a></li>
    <li style="--i:7"><a xxx="#">Contact us</a></li>
    <li style="--i:8"><a xxx="#">Enquire Now</a></li>
  </ul>
</div>
0

为了完成一个完整的示例,我认为您需要混合使用一些 JavaScript。

让我们通过首先创建必要的组件来正确显示视频中的导航来解决这个问题:

<div class="navigation">
  <on id="toggle-on">
  <svg class="menu-on" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  </svg>
</on>

并相应地设计它:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: 'Roboto';
}
#toggle-on {
  background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
.navigation {
  background: #1f2937;
}
.menu-on {
  color: white;
  width: 2.3rem;
  height 2.3rem;
}

接下来我们需要做的是为面板,推子和侧面菜单准备必要的标记。

<div class="overlay-container hidden">
    <div class="overlay"></div>
    <div class="panel">
      <ul class="menu">
        <li class="hidden" style="--i:1">Menu item #1</li>
        <li class="hidden" style="--i:2">Menu item #2</li>
        <li class="hidden" style="--i:3">Menu item #3</li>
        <li class="hidden" style="--i:4">Menu item #4</li>
      </ul>
    </div>
  </div>

当然还有风格:

.overlay-container.hidden {
  display: none;
}
.overlay-container {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.overlay.fade {
  opacity: 0.6;
}
.overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background: black;
  transition: opacity 300ms ease-out;
}
.panel.slide {
  transform: translateX(0%);
}
.panel {
  position: absolute;
  height: 100vh;
  width: 18rem;
  background: #c00136;
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
}
.menu {
  padding: 1rem 1rem;
  list-style-type: none;
}
.menu li.hidden {
  visibility: hidden;
}
.menu li {
  color: #f7f7f7;
  margin: 1rem 0;
}
.menu li.fadeInLeft {
  animation: fadeInLeft 350ms ease calc(var(--i) * 200ms) both;
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2em);
  }
  100% {
    opacity: 1;
  }
}

现在使用这个 javascript,你可以一起编排一切。请注意我是如何使用一些过渡以及动画的,所以我们可以按顺序计时

let on = document.getElementById("toggle-on");
let backbox = document.querySelectorAll('.overlay-container')[0];
let overlay = document.querySelectorAll('.overlay')[0];
let panel = document.querySelectorAll('.panel')[0];
/*
 * Since transitions from 'hidden'
 * to 'block' don't animate we need 
 * to trigger a browser repaint by
 * asking the element for it's height
 */
function forceRepaint(element) {
  return element.offsetHeight;
}
on.addEventListener("click", function () {
  backbox.classList.remove('hidden');
  forceRepaint(backbox);
  overlay.classList.add('fade');
  panel.classList.add('slide');
});
panel.addEventListener("transitionend", function () {
  document.querySelectorAll('.menu li').forEach(node => {
    node.classList.remove("hidden");
    node.classList.add('fadeInLeft');
  })
});

我建议你逐步解决这些问题,这样你将来也能自己解决这些问题。像这样的问题起初看起来很复杂,但你必须把它们分解成更小的部分。

最后,这一切是如何结合在一起的。

let on = document.getElementById("toggle-on");
let backbox = document.querySelectorAll('.overlay-container')[0];
let overlay = document.querySelectorAll('.overlay')[0];
let panel = document.querySelectorAll('.panel')[0];
/*
 * Since transitions from 'hidden'
 * to 'block' don't animate we need 
 * to trigger a browser repaint by
 * asking the element for it's height
 */
function forceRepaint(element) {
  return element.offsetHeight;
}
on.addEventListener("click", function() {
  backbox.classList.remove('hidden');
  forceRepaint(backbox);
  overlay.classList.add('fade');
  panel.classList.add('slide');
});
panel.addEventListener("transitionend", function() {
  document.querySelectorAll('.menu li').forEach(node => {
    node.classList.remove("hidden");
    node.classList.add('fadeInLeft');
  })
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: 'Roboto';
}
#toggle-on {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
.navigation {
  background: #1f2937;
}
.menu-on {
  color: white;
  width: 2.3rem;
  height 2.3rem;
}
.overlay-container.hidden {
  display: none;
}
.overlay-container {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.overlay.fade {
  opacity: 0.6;
}
.overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background: black;
  transition: opacity 300ms ease-out;
}
.panel.slide {
  transform: translateX(0%);
}
.panel {
  position: absolute;
  height: 100vh;
  width: 18rem;
  background: #c00136;
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
}
.menu {
  padding: 1rem 1rem;
  list-style-type: none;
}
.menu li.hidden {
  visibility: hidden;
}
.menu li {
  color: #f7f7f7;
  margin: 1rem 0;
}
.menu li.fadeInLeft {
  animation: fadeInLeft 350ms ease calc(var(--i) * 200ms) both;
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2em);
  }
  100% {
    opacity: 1;
  }
}
<div class="navigation">
  <on id="toggle-on">
  <svg class="menu-on" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  </svg>
  </on>
  <div class="overlay-container hidden">
    <div class="overlay"></div>
    <div class="panel">
      <ul class="menu">
        <li class="hidden" style="--i:1">Menu item #1</li>
        <li class="hidden" style="--i:2">Menu item #2</li>
        <li class="hidden" style="--i:3">Menu item #3</li>
        <li class="hidden" style="--i:4">Menu item #4</li>
      </ul>
    </div>
  </div>
</div>

编辑我使用了 Roko C.Buljan 的答案中的代码片段来改变我的计时逻辑,因为我正在使用 javascript,它使示例变得更加简单。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(48)
正当防卫4控制台代码:带弹簧锁定的Rails4控制台(spring locked)
上一篇
Linux怎么输入密码:输入根密码时键盘不工作 (Linux)(can't type password in terminal
下一篇

相关推荐

  • docker游戏服务器:如何使用Docker搭建高性能的游戏服务器

    Docker游戏服务器是一种将游戏服务器部署到容器中的方式,它可以帮助游戏开发者快速、轻松地部署游戏服务器,并且可以更轻松地扩展游戏服务器的容量。…

    2023-04-27 09:55:33
    0 44 37
  • javascript数组:排序和搜索

    javascript数组是一种特殊的对象,它可以存储多个值,这些值可以是任何类型的数据。JavaScript数组的元素可以通过索引来访问,数组的索引从0开始,每个元素都有一个索引值。…

    2023-08-28 11:30:24
    0 77 75
  • coremail论客邮箱Coremail论客邮箱

    Coremail论客邮箱是一款专业的企业邮箱服务,可以满足企业对安全、可靠性和高效性的要求。它拥有强大的安全性能,可以提供多种安全保护,包括防止邮件被窃取、拦截恶意邮件、防止跨站脚本攻击等。此外,它还支持多种企业级功能,如组织架构管理、收发邮件管理、文件共享管理、联系人管理等,可以帮助企业提高工作效率,提升企业形象。…

    2023-02-25 04:36:55
    0 42 45
  • canvas下载安装:Unleash the Power of Canvas to Create Amazing Visuals

    Canvas是一种HTML5技术,可以在网页上创建和绘制2D图形。它是一个JavaScript API,可以使用JavaScript代码来绘制图形,并且可以添加各种效果,如阴影,渐变,动画等。…

    2023-03-08 00:48:14
    0 71 88
  • class定位:The Benefits of Using Class Selectors for Element Locati

    示例示例class定位是一种CSS布局技术,用于指定HTML元素的位置,可以使元素放置在页面的任何位置。代码示例:…

    2023-03-06 07:16:44
    0 62 75
  • security code怎么填保护您的数据和隐私

    示例示例code是一种防止自动提交表单的安全措施,通常会在表单中显示一个图片,用户需要输入图片中显示的字符。以下是一个简单的 code代码示例:…

    2023-03-20 09:31:54
    0 40 86
  • for循环中的continue:使用continue跳过循环中的某些步骤

    示例示例是 for 循环的一个控制语句,它用于跳过当前循环的剩余代码,然后继续执行下一次循环。下面是一个使用 语句的示例:…

    2023-07-11 15:34:46
    0 79 99
  • javascript 常量:如何利用JavaScript常量提高编程效率

    示例示例常量是一个不可变的值,它的值在声明之后不能更改。它们可以用来存储程序中使用的固定值,并且可以被多次使用。代码示例:…

    2023-06-16 03:01:55
    0 35 61

发表评论

登录 后才能评论

评论列表(82条)