点击导航栏后如何在文本上添加动画？

Question

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

这是导航栏，我想将css动画放到Home Features Pricing About中：

.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;
}

Answer 2

是的，您可以使用javascript的onclick事件添加CSS类。 $(this).addClass('tracking-out-contract')

例如：

<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="#"
            onclick="$(this).addClass('tracking-out-contract')"
            >Home <span class="sr-only">(current)</span></a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="#"
            onclick="$(this).addClass('tracking-out-contract')"
            >Features</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="#"
            onclick="$(this).addClass('tracking-out-contract')"
            >Pricing</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="#"
            onclick="$(this).addClass('tracking-out-contract')"
            >About</a
          >
        </li>
      </ul>
    </div>
  </nav>
</div>

Answer 3

.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;
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="#"
            onclick="$(this).addClass('tracking-out-contract')"
            >Home <span class="sr-only">(current)</span></a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="#"
            onclick="$(this).addClass('tracking-out-contract')"
            >Features</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="#"
            onclick="$(this).addClass('tracking-out-contract')"
            >Pricing</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link"
            href="#"
            onclick="$(this).addClass('tracking-out-contract')"
            >About</a
          >
        </li>
      </ul>
    </div>
  </nav>
</div>