Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: