主页 / 问题 / 865688
Accepted
MAslaev
Asked:2020-08-08 02:45:40 +0000 UTC2020-08-08 02:45:40 +0000 UTC

如何制作反向动画？

  • 772

据我所知transition反向动画作品。为什么在我的示例中反向动画如此顽固？
我想让交叉分解回平行线https://codepen.io/Gaxak/pen/ajRzQG

.navigation__tog {
    position: relative;
    width: 24px;
    height: 18px;
    ...
html

4 个回答

  1. Best Answer

    更正了计时器transition- 并更改了背景的旋转度数background-image

    var tog = document.querySelector(".navigation__tog");

tog.addEventListener("click", function(event) {
  event.preventDefault();
  tog.classList.toggle("navigation__tog--close");
});
    .navigation__tog {
    position: relative;
    width: 24px;
    height: 18px;
    font-size: 0;
    background: transparent;
    background-image: linear-gradient(0deg, transparent 8px, black 10px, black 10px, transparent 10px);
    border: none;
    cursor: pointer;
    outline:none;
}

.navigation__tog::before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    outline:none;
    right: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: black;
    transition: top ease .5s, transform ease .5s;
  }

  .navigation__tog::after {
    position: absolute;
    display: block;
    outline:none;
    content: "";
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: black;
    transition: top ease .5s, transform ease .5s;
  }

.navigation__tog--close {
  background: none;
}

.navigation__tog--close::before {
    transform: rotate(45deg);
    top: 8px;
  }

.navigation__tog--close::after {
    transform: rotate(-45deg);
    top: 8px;
  }
    <button type="button" class="navigation__tog">
  открыть или закрыть основное меню
</button>

    • 5

  2. 我最近做了这样的事情，它可能会派上用场。

    $('.nav-button').on('click',function(){
  if($(this).hasClass('nav-open'))
  $(this).removeClass('nav-open').addClass('nav-close');
  else
  $(this).removeClass('nav-close').addClass('nav-open');
});
    .nav-button {
  display: block;
  width: 50px;
  height: 50px;
  z-index: 10;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.nav-button div {
  display: block;
  background: #000;
  width: 30px;
  height: 4px;
  border-radius: 6px;
  position: absolute;
}

.nav-button.nav-open div {
  left: calc(50% - 15px);
}

.nav-button.nav-open div:nth-child(1) {
  top: calc(50% - 10px);
}

.nav-button.nav-open div:nth-child(2) {
  top: calc(50% - 2px);
}

.nav-button.nav-open div:nth-child(3) {
  top: calc(50% + 6px);
}

.nav-button.nav-close div {
  left: calc(50% - 15px);
  top: calc(50% - 2px);
}

.nav-button.nav-close div:nth-child(1) {
  transform: rotate(45deg);
}

.nav-button.nav-close div:nth-child(2) {
  left: 100%;
  transform: rotate(90deg);
}

.nav-button.nav-close div:nth-child(3) {
  transform: rotate(-45deg);
}

.nav-button:hover div {
  background: #feae17;
}

.nav-button div {
  transition: all linear .2s;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="nav-button nav-open">
  <div></div>
  <div></div>
  <div></div>
</div>

    • 2

  3. 将“navigation_tog”类设置为动画的持续时间。例如： 

    transition: all 300ms;
    • 0

  4. 了解：

    .navigation__tog--close::after {
    transform: rotate(-45deg);
    bottom: 8px;
  }

.navigation__tog::after {
    position: absolute;
    display: block;
    outline:none;
    content: "";
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: black;
    transition: bottom ease .5s, transform ease .5s;
  }
    • 0

相关问题