javascript - 文本装饰过渡不显示

Question

如此处所述https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties , 'text-decoration' 是一个动画 CSS 属性。

但我尝试通过过渡属性为其设置动画:

function strikeText() {
  const elem = document.querySelector('.textdiv');
  const current = elem.style.textDecoration;
  elem.style.textDecoration = (  current == ""   ?  "line-through" : ""  );
}

function changeOpacity() {
  const elem = document.querySelector('.textdiv');
  const current = elem.style.opacity;
  elem.style.opacity = (  current == "0"   ?  "1" : "0"  );
}

.textdiv {
  transition: 2s;
}

<div class="textdiv">some text</div>

<button onclick="strikeText()">strikeText</button>
<button onclick="changeOpacity()">changeOpacity</button>

虽然不透明度过渡似乎有效，但文本装饰过渡无效。为什么？

Answer 1

您可以只为文本装饰的一部分设置动画:文本装饰颜色。

.text {
  transition: text-decoration 2s ease;
  text-decoration: solid underline transparent;
  cursor: pointer;
}
 .text:hover {
    text-decoration-color: #f95ce4;
  }

<div class="text">hello world</div>