时间戳

首页 > 解决方案 > 关键帧淡入，但如何让它在点击时淡出？

css - 关键帧淡入，但如何让它在点击时淡出？

问题描述

我正在使用关键帧，因此在单击时淡入项目，但我希望它们在我再次单击时淡出。我如何使用关键帧来做到这一点？也许这是你不能用关键帧做的事情？

密码笔

<div class="icon-wrap" onclick="bunAnimate(this)">
    click me
</div>
<div class="primary__nav">
  <ul id="primary" class="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>
</div>

.primary__nav {
   display: none;

  &.open {
   display: block;
  }
}

.icon-wrap {
  cursor: pointer;
}
   
ul {
    position: relative;
    list-style-type: none;
    display: flex;
    margin-bottom: 0;
    li {
    opacity: 0;
    -webkit-animation: fadeInRight 0.5s linear forwards;
    animation: fadeInRight 0.5s linear forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
    }

    li:nth-of-type(2) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    }

    li:nth-of-type(3) {
    -webkit-animation-delay: 0.45s;
    animation-delay: 0.45s;
    }

    li:nth-of-type(4) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    }

    li:nth-of-type(5) {
    -webkit-animation-delay: 0.55s;
    animation-delay: 0.55s;
    }
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

function bunAnimate(x) {
  $(".icon-wrap").toggleClass("open");
  $(".primary__nav").toggleClass("open");
}

标签： csssass

解决方案

您可以通过或多或少地反转该过程使列表在单击时逐项淡出。

不过有一个小问题，不可能完全在 CSS 中完成，因为动画不会设置 display 属性，所以display: none当淡出全部完成时，我们无法在主要 nav 元素上设置关键帧声明。我们通过引入另一个类来解决这个问题display，我们通过 Javascript 调用它。这是用 a 相当粗略地完成的setTimeout，通过监听动画的结束可能会更复杂，但它基本上是同一件事。

function bunAnimate(x) {
  document.querySelector(".icon-wrap").classList.toggle("open");
  if (!document.querySelector(".primary__nav").matches('.open')) { 
    document.querySelector(".primary__nav").classList.add("open");
    document.querySelector(".primary__nav").classList.add('display'); //display immediately it's open
  }
  else {
    document.querySelector(".primary__nav").classList.remove("open"); 
    setTimeout(function () {
      document.querySelector(".primary__nav").classList.remove("display");     
      },550);//unpleasant but animations don't allow setting of display
  }
}
.primary__nav {
   display: none;
}

.primary__nav.display{
   display: block;
}

.icon-wrap {
  cursor: pointer;
}
   
ul {
    position: relative;
    list-style-type: none;
    display: flex;
    margin-bottom: 0;
    }
    
  li {
    animation-name: fadeOutLeft;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    }

  li:nth-of-type(1) {
    animation-delay: 0.55s;
    }
    
  li:nth-of-type(2) {
    animation-delay: 0.5s;
    }

  li:nth-of-type(3) {
    animation-delay: 0.45s;
    }

  li:nth-of-type(4) {
    animation-delay: 0.4s;
    }
    
  li:nth-of-type(5) {
    animation-delay: 0.35s;
    }
    
 .open li {
    display: block;
    opacity: 0;
    animation-name: fadeInRight;
    }
    
  .open li:nth-of-type(1) {
    animation-delay: 0.35s;
    }
    
  .open li:nth-of-type(2) {
    animation-delay: 0.4s;
    }

  .open li:nth-of-type(3) {
    animation-delay: 0.45s;
    }

  .open li:nth-of-type(4) {
    animation-delay: 0.5s;
    }

  .open li:nth-of-type(5) {
    animation-delay: 0.55s;
    }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    }

  100% {
    opacity: 1;
  }
}
@keyframes fadeOutLeft {
  0% {
  }

  100% {
    opacity: 0;
  }
}
<div class="icon-wrap" onclick="bunAnimate(this)">
    click me
</div>
<div class="primary__nav">
  <ul id="primary" class="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>
</div>

注意：我使用纯 CSS，因为我不熟悉 SCSS。

推荐阅读