为什么我的转换不能用于<hr />？

Question

我在<div>中有<hr>和<a>。当有人徘徊整个事情时，它应该制作流畅的动画。

.wrap:hover div{
  transition: all 2s;
  opacity: 0.6;
}

.wrap:hover hr{
  transition: all 2s linear;
  width: 200px;
}

.image{
  background-color: red;
  padding: 20px;
}

hr{
  min-width: 20px;
  float: left;
}

<a class="wrap">
  <div class="image">
     Content
  </div>
  <hr class="hr-animation">
</a>

转换适用于<div>。但为什么我的<hr>不流畅？

Answer 1

您需要在hr原始规则中使用与hover规则相同的参数，即width，而不是min-width：

.wrap:hover div{
  transition: all 2s;
  opacity: 0.6;
}

.wrap:hover hr{
  transition: all 2s linear;
  width: 200px;
}

.image{
  background-color: red;
  padding: 20px;
}

hr{
  width: 20px;
  float: left;
}

<a class="wrap">
  <div class="image">
     Content
  </div>
  <hr class="hr-animation">
</a>

Answer 2

这是因为你设置了hr的min-width而不是width中没有悬停的状态。您正试图从未设置为“width：200px;”的内容过渡。 定义宽度以修复它。

.wrap:hover div{
  transition: all 2s;
  opacity: 0.6;
}

.wrap:hover hr{
  width: 200px;
}

.image{
  background-color: red;
  padding: 20px;
}

hr{
  width: 20px;
  float: left;
  transition: all 2s linear;
}

<a class="wrap">
  <div class="image">
     Content
  </div>
  <hr class="hr-animation">
</a>

Answer 3

您需要指定一个宽度来开始并为hr设置转换，而不是悬停。

.wrap:hover div {
  transition: all 2s;
  opacity: 0.6;
}

.wrap:hover hr {
  width: 200px;
}

.image {
  background-color: red;
  padding: 20px;
}

hr {
  min-width: 20px;
  float: left;
  transition: all 2s linear;
  width: 20px;
}

<a class="wrap">
  <div class="image">
    Content
  </div>
  <hr class="hr-animation">
</a>

Answer 4

更改：

hr {
  min-width: 20px;<<--------
  //more code----
}

收件人：

hr {
  width: 20px;<<--------
  //more code----
}

  .wrap:hover div{
  transition: all 2s;
  opacity: 0.6;
}

.wrap:hover hr{
  transition: all 2s linear;
  width: 200px;
}

.image{
  background-color: red;
  padding: 20px;
}

hr {
  width: 20px;
  float: left;
}

<a class="wrap">
  <div class="image">
     Content
  </div>
  <hr class="hr-animation">
</a>