Question

是否可以在css-transition已经触发后重新进行（覆盖）？

在css-transition已经生效后，似乎无法覆盖transition-delay （特别是考虑到延迟时间可能已经过去的可能情况，延迟值会缩短，等等。）但是我没有找到具体的解释。

我认为必须在指示目标属性（在这种情况下为background-color）的指示之前或同一时间指示css-transition？

（抱歉，我不得不多次编辑以缩小我的问题。如果有人想知道为什么我需要这样的东西，我在下面解释了我想要的机制。它已经简化了我的项目。）

我想做的是

在jQuery'load'事件之前，background-color: transparent已应用。
然后在jQuery'load'事件中，应用background-color: red
（由jQuery添加的类名loaded的css确定）。
另一方面，transition-delay由jQuery提供的类名单独确定。

澄清

只是为了区别于其他类似的问题..

仅需要有条件地覆盖transition-delay 虽然有趣的是，当background-color改变时，它会成功。
有条件地进行覆盖，即：CSSOM保持不变，但DOM的类名可能在其初始状态后发生变化。（具体到这种情况，按下按钮时会添加类。）
当DOM保持不变时，覆盖成功，但这不是我想要的。

Here's fiddle to illustrate the situation

HTML

<div>
<!-- class name "loaded" will be given after load event. -->
  <p class="delay delay-1s">
  <!-- class name 'delay-1s' will be replaced with 'delay-5s' with button -->
    This will be turning into red after loaded in..<br>
    1.) 1 seconds without button or<br>
    2.) 5 second with button
  </p>
</div>

<button id="change-delay">Change delay to 5s</button>

CSS

/* Make P from transparent to red when loaded */
div p {
  background-color: transparent;
}
div.loaded p {
  background-color: red;
}

.delay.delay-1s {
  transition-delay: 1s;
}
.delay.delay-5s {
  transition-delay: 5s;
}

的Javascript

$(window).on('load', function(){
    $('div').addClass('loaded');
});
$('button#change-delay').click(function() {
    $('.delay').removeClass('delay-1s').addClass('delay-5s');
});

我在今天（2017年9月）更新的Chrome / Firefox上对此进行了测试，但两者都返回了相同的结果。

EDIT1：
我很确定这与提供课程名称的时间有关如果我在HTML中添加类btn-pressed，即在文档上对它们进行硬编码，则覆盖按预期工作。虽然，它不会仅在修改类时发生。

EDIT2：
补充说明。

EDIT3：
缩小了问题。

edit4：
在代码上添加事件发生的事件：

加载文件。
P获取background-color: transparent和transition-delay: 1s;
已完成加载，将“已加载”类添加到DIV，
P获取background-color: red 并触发css-transition
BUTTON *，将“btn-pressed”类添加到DIV。
P分配transition-delay: 5s;，覆盖CSSOM;但是，因为从2开始的css-transition已经在行动，所以它没有生效。

*当然，如果在加载完成之前点击了BUTTON，它就会生效。

我太懒了，无法阅读W3C文件，但也许这就是我应该在业余时间做的事情。

Answer 1

这里的Html代码

AT+CIPSHUT  
AT+CGATT=0  
AT+CGATT=1  
AT+CGDCONT=1,IP,"Your APN NAME"
AT+CIPMODE=0
AT+CGACT=1,1
AT+CSTT="Your APN Name"
AT+CIICR
AT+CIFSR
AT+CLPORT="TCP","2020"

这里的Css代码

<div class="bg">
   <p>test here</p>
</div>
<button class="btn">Activate</button>

Js代码在这里

.bg {
   min-height: 200px;
   background-color: transparent;
}

我假设你有jquery。如果有任何问题请通过下面的评论告诉我。

我希望这是你需要的。

注意 - 根据您的需要进行一些更改，例如班级名称和事件。

已经触发后重启（覆盖）css-transition

澄清

1 个答案: