动画hr标签在悬停时进入和退出

Question

我正在尝试对锚标签中的hr标签进行动画处理。基本上，我想要的是将hr标签滑到锚标签上，然后将hr标签从左侧滑入。

到目前为止，我所做的是将hr标签滑到左侧而不是向右滑动，移开鼠标时，它从左侧滑回。

我想要实现以下目标：

按钮组件

<Fragment>
    <Link className="btn" to={ this.props.linkTo }>
        <div>
            <span>{ this.props.text }</span>
            <hr/>
        </div>
    </Link>
</Fragment>

CSS

.btn {
    color: var(--black);
    text-decoration: none;
    display: flex;
}
.btn > div > span {
    line-height: 30px;
}
.btn > div > hr {
    margin: 0;
    border: 0;
    border-top: 2px solid var(--black);
    width: 100%;
    transition: width 0.2s ease-out;
}
.btn:hover div > hr {
    width: 0;
}

Answer 1

您可以为此使用float属性。这是使用纯HTML的简单示例。

div > hr {
  transition: width 1s ease-out; /* For Safari 3.1 to 6.0 */
  transition: width 1s  ease-out;
  width : 100%;
  float: left;
}
div:hover > hr {
   width:0%;
   float: right;
}

<div>
  <h2>
  Fooo Barrr
  </h2>
  <hr/>
</div>

Answer 2

您可以将float属性与border-style中的height和hr一起使用。您还可以更改background-color中的hr。

请参见下面的代码段

.container{
  display:inline-block;
  position:relative;
}
.container > span{
  cursor:pointer;
  font-size:20px;
}
.container > hr {
  transition: width 0.3s ease-out;
  width:100%;
  float:left;
  border-style: none;
  background: #000;
  height: 2px;
  margin:0;
}
.container:hover > hr {
  width:0%;
  float:right;
}

<div class="container">
  <span>See what we do</span>
  <hr/>
</div>

Answer 3

浮动权将得到它过渡到右边，当它回来的时候，它会也可以由左到右，就像您发布的图像。

  

.btn：悬停DIV>小时{宽度：0;浮动：正确； }