javascript - 单击导航栏后如何在文本上放置动画？

Question

我想知道如何放置动画(来自 Animista)，以便在您单击它时使导航栏(标签)文本消失

所以这是导航栏，我想将 css 动画放在主页功能定价关于:

.tracking-out-contract {
	-webkit-animation: tracking-out-contract 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: tracking-out-contract 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

 @-webkit-keyframes tracking-out-contract {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    100% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
  }
  @keyframes tracking-out-contract {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    100% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
  }

    <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse" id="navbarColor03">
              <ul class="container-fluid navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Pricing</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">About</a>
                </li>
              </ul>
            </div>
        </nav>
    </div>

这里我需要一些 Javascript 吗？

谢谢!

Answer 1

如果您只是将动画放在事件菜单项上会怎样？

.nav-link:active,
.nav-link:focus {
    -webkit-animation: tracking-out-contract 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: tracking-out-contract 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}