為什么GSAP中的影片沒有反轉？-有解無憂

我有疑問，我想要反向影片“showMenuList”（這是粉紅色背景），但這不起作用，錯誤在哪里？

我試過暫停，還有很多方法，但這不起作用，請幫忙

我知道這主要是代碼，但我不知道還要寫什么。

const menuToggler = document.querySelector(".toggler");
const menuTogglerHamburger = document.querySelector(".toggler .hamburger");

menuToggler.addEventListener("click", function () {
  //checking if there is a class animationToggler
  if (menuTogglerHamburger.classList.contains("animationToggler")) {
    //restart animation rotate
    menuTogglerHamburger.classList.remove("animationToggler");
    void menuTogglerHamburger.offsetWidth;
    menuTogglerHamburger.classList.add("animationToggler");
  }

  menuTogglerHamburger.classList.add("animationToggler");

  menuToggler.classList.toggle("show");
  menuToggler.classList.contains("show")
    ? showMenuList(true)
    : showMenuList(false);

  setTimeout(() => {
    //animation line on the cross
    menuTogglerHamburger.classList.toggle("active");
  }, 200);
});

//---------------------- Show menu list ----------------------//

const showMenuList = (e) => {
  console.log(e);
  const showMenuTl = gsap.timeline({ pause: true });

  e ? showMenuTl.play() : showMenuTl.reverse();

  showMenuTl
    .to(".nav-menu", 0.8, { css: { top: "50%" } })
    .to(".nav-menu", 0.4, { css: { width: "140vw", height: "140vw" } });
};

body {
    overflow: hidden;
}

nav {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    padding-top: 1em;
}

.toggler {
    display: flex;
    align-items: center;
    cursor: pointer;


}

.animationToggler {
    animation: animationTogglerMenu .8s ease;
}


.toggler p {
    margin: 0;
    text-transform: uppercase;
    font-size: 1.65rem;
    margin: 0 0 0 10px;
    z-index: 3;
}

.hamburger {
    z-index: 3;
}

.hamburger .line {
    height: 4px;
    width: 2.5em;
    background: #000;
    margin: .45em 0;
    border-radius: 50px;
    transition: .3s;
}

.active .one {
    transform: rotate(45deg) translateY(15px);
}

.active .two {
    background-color: transparent;
    transition: none;
}

.active .three {
    transform: rotate(-45deg) translateY(-15px);
}

.nav-menu {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3em;
    height: 3em;
    background-color: rgb(255, 117, 117);
    border-radius: 50%;
    /* opacity: 0.4; */
    z-index: 2;
}

.nav-menu ul {
    display: none;
}


@keyframes animationTogglerMenu {

    100% {
        transform: rotate(360deg);
    }
}

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="toggler">
        <div class="hamburger">
            <div class="line one"></div>
            <div class="line two"></div>
            <div class="line three"></div>
        </div>
        <p>Menu</p>
    </div>
    <div class="nav-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Projekty</a></li>
            <li><a href="#">O nas</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
    <script src="main.js"></script>
</body>

</html>

https://codepen.io/jarek-babiak/pen/KKQGgME

uj5u.com熱心網友回復：

您的代碼的一個問題是您需要通過paused: true而不是傳遞pause:true給時間線函式。

改進代碼的一種方法（在我看來）是將時間線物件的創建移到代碼塊的頂層。像這樣...

const menuToggler = document.querySelector(".toggler");
const menuTogglerHamburger = document.querySelector(".toggler .hamburger");

// Add it here -----------------------
const showMenuTl = gsap.timeline({ paused: true });
showMenuTl
  .to(".nav-menu", 0.8, { css: { top: "50%" } })
  .to(".nav-menu", 0.4, { css: { width: "140vw", height: "140vw" } });

然后您可以擺脫該showMenuList功能并直接呼叫playand reverse。

  menuToggler.classList.toggle("show");
  menuToggler.classList.contains("show")
    ? showMenuTl.play()
    : showMenuTl.reverse()

uj5u.com熱心網友回復：

您可以解決此問題的一種方法是創建另一個時間線。如果您添加更多關鍵幀，這會很煩人。您可以這樣做的另一種方法是添加一個起始關鍵幀，然后一切都應該順利運行，如下所示。

showMenuTl
  .to(".nav-menu", 1, { css: { width: "3rem", height: "3rem", top: "-100%" } })
    .to(".nav-menu", 0.8, { css: { width: "3rem", height: "3rem", top: "50%" } })
    .to(".nav-menu", 0.4, { css: { width: "140vw", height: "140vw", top: "50%" } });

  e ? showMenuTl.play() : showMenuTl.reverse(0);

uj5u.com熱心網友回復：

首先，它應該是{ paused: true }，而不是{ pause: true }，正如@jessegavin 所說。其次，在點擊發生的地方，您應該已經制作了影片，這意味著時間線定義應該在頂部，在showMenuList. 第三，您可以將代碼簡化為：

查看 JavaScript 部分，它更短，我稍微修改了 CSS。

const menuToggler = document.querySelector(".toggler");

const showMenuTl = gsap.timeline({ paused: true });
showMenuTl
  .to(".nav-menu", 0.8, { css: { top: "50%" } })
  .to(".nav-menu", 0.4, { css: { width: "140vw", height: "140vw" } });

menuToggler.addEventListener("click", function () {
  if (menuToggler.classList.contains("active")) {
    menuToggler.classList.remove("active");
    showMenuTl.reverse();
  } else {
    menuToggler.classList.add("active");
    showMenuTl.play();
  }
});

body {
  overflow: hidden;
}

nav {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  padding-top: 1em;
}

.toggler {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.toggler p {
  margin: 0;
  text-transform: uppercase;
  font-size: 1.65rem;
  margin: 0 0 0 10px;
  z-index: 3;
}

.hamburger {
  z-index: 3;
}

.hamburger .line {
  height: 4px;
  width: 2.5em;
  background: #000;
  margin: 0.45em 0;
  border-radius: 50px;
  transition: 0.3s;
}
.active .hamburger {
  animation: animationTogglerMenu 0.8s ease;
}
.active .one {
  transform: rotate(45deg) translateY(15px);
}

.active .two {
  background-color: transparent;
  transition: none;
}

.active .three {
  transform: rotate(-45deg) translateY(-15px);
}

.nav-menu {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3em;
  height: 3em;
  background-color: rgb(255, 117, 117);
  border-radius: 50%;
  /* opacity: 0.4; */
  z-index: 2;
}

.nav-menu ul {
  display: none;
}

@keyframes animationTogglerMenu {
  100% {
    transform: rotate(360deg);
  }
}

<!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>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="toggler">
    <div class="hamburger">
      <div class="line one"></div>
      <div class="line two"></div>
      <div class="line three"></div>
    </div>
    <p>Menu</p>
  </div>
  <div class="nav-menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Projekty</a></li>
      <li><a href="#">O nas</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
  <script src="main.js"></script>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/487770.html

標籤：javascript html css gsap

上一篇：[email protected]僅重定向到控制器，而不是操作

下一篇：帶有MUI的PaddingLeft三元運算子