为什么我的CSS/ Javascript动画不工作？

kuhbmx9i 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(194)

我正在制作一个CSS和Javascript的动画菜单，并与它的问题。这个想法是有一个菜单与不透明度：0（使用CSS）在第一次然后通过点击汉堡菜单不透明度成为1和菜单滑到右边一点（使用Javascript）.菜单飞在罚款，但在点击汉堡X按钮，它不会再次飞出和X不会改变汉堡图标.
这是一个CSS动画（过渡会更容易吗？））
下面是代码：

let d = document.getElementsByClassName("show")[0];
let f = document.getElementsByClassName("menu")[0];
let o = document.getElementsByClassName("burger")[0];
let p = document.getElementsByClassName("burgers")[0];

d.toggleStatus = "off";

f.onclick = function() {
  switch (d.toggleStatus) {
    case "off":
      d.toggleStatus = "on";
      d.setAttribute('style', 'animation-play-state:running');
      break;

    case "on":
      d.toggleStatus = "off";
      d.setAttribute('style', 'display:none');
      break;
  }
  o.classList.toggle('rotate');
  p.classList.toggle('rotate2');

}

.show {
  opacity: 0;
  animation: menu .3s ease-out;
  animation-play-state: paused;
  animation-fill-mode: forwards
}

@keyframes menu {
  0% {
    margin-right: 190px;
    opacity: 0
  }
  100% {
    margin-right: 89px;
    opacity: 1
  }
}

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<div class="menu">
  <div class="burger"><img src="https://picsum.photos/50" /></div>
  <div class="burgers"><img src="https://picsum.photos/50" /></div>
</div>
<div class="show pt-20 min-w-screen text-center min-h-screen">
  <a href="#"><span>Home</span></a>
  <a href="#"><span>About</span></a>
  <a href="#"><span>Work</span></a>
  <a href="#"><span>Contact</span></a>
</div>

请在全屏上查看页面。

JavaScript

来源：https://stackoverflow.com/questions/76325013/why-isnt-my-css-javascript-animation-working

1条答案

按热度按时间

bkhjykvo1#

您可以使用transition沿着类切换。

const d = document.querySelector(".menu");
const f = document.querySelector(".burger-container");
const o = document.querySelector(".burger");
const p = document.querySelector(".burgers");

f.addEventListener('click', function() {
  d.classList.toggle('show');
  o.classList.toggle('hidden');
  p.classList.toggle('hidden');
  o.classList.toggle('rotate');
  p.classList.toggle('rotate2');
});

console.clear();

.menu {
  opacity: 0;
  transition: all .3s ease-out;
  margin-right: 190px;
}
.menu.show {
  opacity: 1;
  margin-right: 89px;
}

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<div class="burger-container">
  <div class="burger"><img src="https://picsum.photos/50" /></div>
  <div class="burgers hidden"><img src="https://picsum.photos/40" /></div>
</div>
<div class="menu pt-20 min-w-screen text-center min-h-screen">
  <a href="#"><span>Home</span></a>
  <a href="#"><span>About</span></a>
  <a href="#"><span>Work</span></a>
  <a href="#"><span>Contact</span></a>
</div>

赞(0）回复(0）举报 2023-05-27

我来回答

为什么我的CSS/ Javascript动画不工作？

1条答案

相关问题

热门标签

最新问答