是否可以内联应用 CSS 过渡？

Question

是否可以内联（在 DOM 中）应用 CSS 过渡，而不使用伪选择器或使用 JS 在 dom 上添加和更改属性 class？ .

#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>