边框底部的动画答案

【问题标题】：Animation from bottom for border-bottom边框底部的动画
【发布时间】：2017-06-27 17:01:38
【问题描述】：

我有以下 CSS 目前在 border-bottom 中淡出。

.nav-bar-button {
  border-bottom: solid 13px transparent;
  min-width: 90px;
  padding: 0px;
  cursor: pointer;
  text-align: center;
  position: relative;
  @media #{$for-tablet, $for-phone} {
    min-width: 81px;
  }

  &:hover {
    border-bottom: solid 13px $brand-primary;
    transition-timing-function: ease-in;
    transition: .5s;
  }

  &.active {
    border-bottom: solid 7px $brand-primary;
    padding-bottom: 6px;
    transition: .5s;
    transition-timing-function: ease-in;
  }
}

我想要为border-bottom 设置动画，使其看起来好像从nav-bar-button 下方滑入。有没有办法做到这一点，同时仍然避免从导航栏按钮展开“跳跃”？

这里也是 reactjs 和 HTML，经过编辑使其更易于理解：

  render () {
    let indicatorClasses = [styles.navBarButton]
    if (this.props.isActive) {
      indicatorClasses.push(styles.active)
    }

    return (
      <div
        className={indicatorClasses.join(' ')}
        onClick={(e) => { this.onClick(e) }} >
        <span className={styles.navBarButtonLabel}> {this.props.label.toUpperCase()} </span>
      </div>
    )
  }
}

<div class="style__navbar-buttons-container___1IIp4">
    <div class="ant-row">
        <div class="ant-col-8">
            <div class="style__nav-bar-button___30PmS">
            <span class="style__nav-bar-button-label___wjjHW">HOME</span>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

欢迎来到 StackOverflow，您的问题应该包含 Minimal, Complete and Verifiable Example。
您能否提供 HTML 以便我们实际查看发生了什么？
添加了 HTML 和 reactjs 代码！

标签： css reactjs sass

【解决方案1】：

您可以使用插入的box-shadow，而不是使用border-bottom。还将您的 transition 属性移动到实际的选择器中，以便即使在移除悬停时它也可以动画。

这是更新后的 SCSS。

.nav-bar-button {
  box-shadow: none;
  min-width: 90px;
  padding: 0px;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition-timing-function: ease-in;
  transition: .5s;
  @media #{$for-tablet, $for-phone} {
    min-width: 81px;
  }

  &:hover {
    box-shadow: inset 0 -13px 0 0 $brand-primary;
  }

  &.active {
    box-shadow: inset 0 -7px 0 0 $brand-primary;
    padding-bottom: 6px;
  }
}

【讨论】：