可以内联应用CSS过渡吗? [英] Is it possible to apply CSS transitions inline?

问题描述

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

Is it possible to apply CSS transitions inline (in the DOM), without using Pseudo Selector or using JS to add and change a property class on the dom? .

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

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

推荐答案

转换需要变化的值才能产生效果.正如您所提到的，通常可以通过切换类或使用伪选择器来实现.

Transitions need a changing value to produce any effect. This is usually achieved, as you mentioned, by toggling a class or using a pseudo selector.

如果您希望在不进行任何更改的情况下进行过渡"，则需要使用动画:

If you want your "transition" to happen without any changing values, you need to use an animation:

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

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

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

我不确定您为什么需要内联执行此操作.

I'm not sure why you would need to do this inline though.

这篇关于可以内联应用CSS过渡吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！