javascript - 单击下划线动画

Question

我正在尝试根据描述和评论重新创建动画 here .当链接被取消点击时，下划线从右到左动画 下划线在它消失之前从左到右动画。

a {
  color:#00f;
  text-decoration:none;
  display:inline-block;
}
a:after {
  width: 0;
  display:block;
  background:#00f;
  height:3px;
  transition: all .5s ease-in-out;
  content:"";
}
a:hover {
  color:#00f;
}
a:hover:after {
  width:100%;
}

<a href="#">Click first</a>
<a href="#">Click second</a>

Answer 1

1. 在伪元素上使用position。将position: relative添加到a，将position: absolute添加到:after。

2. 使用bottom 和right 定位伪元素。这意味着该线从右侧开始。

3. 悬停/单击时，添加 left 属性。这使得线跨越整个宽度。宽度从左到右从 0 增长到 100%。

当您“取消悬停”或再次单击时，left 将被移除，并且该线再次从右侧开始，因此该方向的宽度会减小。

$('a').on('click', function() {
  $('a').not(this).removeClass('underline');
  $(this).toggleClass('underline');
});

a {
  color: #00f;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

a:after {
  width: 0;
  background: #00f;
  height: 3px;
  transition: all .5s ease-in-out;
  content: "";
  position: absolute;
  bottom: -5px;
  right: 0;
}

a.underline:after {
  width: 100%;
  left: 0;
}

a:hover:after {
  width: 100%;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click first</a>
<a href="#">Click second</a>