Question

我有以下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>

Answer 1

您可以使用插入border-bottom，而不是使用box-shadow。同时将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;
  }
}

边框底部的动画

1 个答案: