是否可以内联应用CSS转换？

Question

是否可以在不使用Pseudo Selector或使用JS添加和更改classdom上的属性的情况下内联(在DOM中)应用CSS过渡？.

#target{
  width: 100px;
  height:100px;
  background-color:red;
}

<div id="target" style="transition: opacity 1s linear;"></div>

Answer 1

转换需要一个不断变化的值才能产生任何效果.正如您所提到的,通常通过切换类或使用伪选择器来实现.

如果您希望在没有任何更改值的情况下进行"转换",则需要使用动画:

#target{
  width: 100px;
  height:100px;
  background-color:red;
}

@keyframes fadeMe {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div id="target" style="animation: fadeMe 2s;"></div>

我不知道为什么你需要内联这样做.

Answer 2

结合内联 JavaScript 你可以实现这一点，试试这个：

#target{
  width: 100px;
  height:100px;
  background-color:red;  
}

<div id="target" style="transition: all 4s linear;" onclick="this.style.opacity = '.3'">click me</div>