CSS - 另一个过渡不起作用的问题

Question

试图理解transition css 属性，但似乎无法弄清楚为什么这段代码不起作用。边框需要从solid变为dotted

.home {
  color: #ff652f;
  font-weight: 700;
  border-bottom: 18px solid #ff652f;
  -webkit-transition: border-bottom 3s ease-in-out;
  transition: border-bottom 3s ease-in-out;
}

.home {
  border-bottom: 18px dashed #ff652f;
}

在这里做了一个 jsfiddle - https://jsfiddle.net/h7925b8g/

希望过渡缓慢进行。任何想法我做错了什么？非常感谢任何帮助！

Answer 1

如 cmets 中所述，border-style 是不可动画的，因此不能简单地使用 transition 属性来更改它。

相反，您可以伪造它。你如何做到这一点取决于你想要过渡的样子。一种方法是使用重复的 linear-gradient 来实现虚线效果，然后将其转换为覆盖边框（文字 border 或其他一些像边框一样的元素）。

例如从底部向上滑动：

.home {
  color: #ff652f;
  font-weight: 700;
  width: 200px;
  padding-bottom: 10px;
  position: relative;
}

.home::before,
.home::after {
  content: '';
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.home::before {
  height: 10px;
  background-color: orange;
  z-index: 0;
}

.home::after {
  height: 0px;
  transition: height 350ms ease;
  background-image: linear-gradient(to right, white 0px 10px, orange 10px 20px, white 20px);
  background-size: 20px 100%;
  background-repeat: repeat;
  z-index: 1;
}

.home:hover::after {
  height: 10px;
}

<div class="home">Hover me!</div>

或从左侧滑入：

.home {
  color: #ff652f;
  font-weight: 700;
  width: 200px;
  padding-bottom: 10px;
  position: relative;
}

.border-animation {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 10px;
  overflow: hidden;
  background-color: orange;
}

.border-animation::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-image: linear-gradient(to right, white 0px 10px, orange 10px 20px, white 20px);
  background-size: 20px 100%;
  background-repeat: repeat;
  transform: translateX(-100%);
  transition: transform 350ms ease;
}

.home:hover .border-animation::after {
  transform: translateX(0);
}

<div class="home">Hover me!<span class="border-animation"></span></div>