重复(覆盖)CSS转换已经触发后

Question

是否有可能在触发之后重新启动（覆盖）CSS-Transition？

在CSS转变已经生效后，覆盖transition-delay似乎是不可能的。
（尤其是考虑到延迟持续时间可能已经过去的可能情况，延迟值缩短等等。）但是我没有找到具体的解释。

我想必须在以前的指示CSS-转移或指示目标属性更改（在这种情况下background-color）的同一时间？

？

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

---

我要做的是

• 在jQuery'load'事件之前，应用background-color: transparent。
• 然后在jQuery"加载"事件中，应用background-color: red
  （由CSS确定具有类名loaded的CSS。
• 在另一方面， transition-delay由jQuery提供的班级名称分别确定。

澄清

只是与其他类似问题区分开。

1. i 唯一的需要有条件地覆盖transition-delay。
   虽然有趣的是，当background-color与伴随更改时，它将成功。

2. 覆盖有条件地发生，即：CSSOM保持恒定，但是DOM的班级名称在初始状态后可能会更改。（要特定于这种情况，按下按钮时会添加类。）
   在DOM保持恒定的同时，覆盖成功，但这不是我想要的。

---

这是说明情况的小提琴

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');
});

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

---

edit1：
我很确定这与提供班级名称有关。
如果我在HTML中添加类btn-pressed，即在文档上进行硬码，则根据预期工作。虽然，在修改课程时，它不会完全发生。

edit2：
添加了澄清。

edit3：
缩小问题。

edit4：
添加代码上发生的事件的时间段：

1. 加载文档。
   P获取background-color: transparent和transition-delay: 1s;
2. 加载已完成，将"加载"类添加到DIV，
   P获取background-color: red 并解雇CSS-Transition
3. BUTTON被单击*，将类'BTN-PARDESS'添加到DIV。
   P获取transition-delay: 5s;分配，覆盖CSSOM；但是，由于CSS-transition从2开始。

*肯定，如果BUTTON在加载完成之前已单击，它将生效。

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

Answer 1

html代码

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

CSS代码

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

JS代码在这里

$(window).on('load', function(){
    var delay = 5000;
    If ( $('.bg').hasClass('pressed') ) {
        delay = 2000; //set delay to 2 sec,
    }
    $('.btn').on('click', function() {
        $('.bg').addClass('pressed');
    });
    $('.bg').animate({
        'background-color': 'red'
    }, delay);
});

我假设你有jQuery。如果有任何问题，请通过在下面发表评论让我知道。

我希望这是您需要的。

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