创建具有不同开始和结束行为的 CSS 过渡？答案

【问题标题】：Create a CSS transition with different start and end behaviour?创建具有不同开始和结束行为的 CSS 过渡？
【发布时间】：2019-05-24 04:40:35
【问题描述】：

我想在 HTML 元素上进行简单的颜色转换。

我要解决的问题是，我需要第一部分进行过渡更快和第二部分 较慢。

所以，我在快速闪烁（淡入）和较慢的恢复（淡出）之后。

我通过以下解决方案实现了这一点，但对我来说它看起来不正确。从某种意义上说，它看起来不正确，因为我最终使用了嵌套的事件处理程序并且代码太复杂了。但是，它准确地展示了我想要实现的目标。

有没有办法以更智能的方式设置这种variableCSSTransition？

function updateCard (cardObj) {
    // Handle card color.
    let cardBlinkColor = 'rgb(11, 83, 69)';

    // Store current background.
    let cardIdleColor = cardObj.style.background;
    // Asign fade-in properties.
    cardObj.classList.add('fadeIn');
    cardObj.style.background = cardBlinkColor;
    cardObj.addEventListener('transitionend', function(event) {
        //console.log('(IN) Done!, propertyName:', event.propertyName, 'elapsedTime:', event.elapsedTime);
        cardObj.classList.remove('fadeIn');
        cardObj.classList.add('fadeOut');
        cardObj.style.background = cardIdleColor;
        cardObj.addEventListener('transitionend', function(event) {
            //console.log('(OUT) Done!, propertyName:', event.propertyName, 'elapsedTime:', event.elapsedTime);
            cardObj.classList.remove('fadeOut');
        }, true);
    }, true);
}

const z = document.getElementsByClassName('card-container');
const card = z[0];

// Emulate client/server sequence.
setInterval(function() {
  updateCard(card);
}, 3000);

body {
  background-color: rgb(0, 39, 59) !important;
}

.table {
  /*border: 3px solid DeepSkyBlue;*/
  /*table-layout: fixed;*/
  width: 610px;
}

.table .main-row {
  border: 4px solid rgb(0, 49, 74);
  background-color: rgb(0, 39, 59);
}

.table .card-container {
  border: 1px solid rgb(0, 70, 106);
  background-color: rgb(2, 33, 46);
  width: 10em;
  margin: auto;
  table-layout: fixed;
  padding: 4px 4px;
}

.table .ticker {
  color: rgb(159, 235, 252);
}

.table .icon {
  color: rgb(252, 205, 159);
}

.table .card-container.fadeIn {
  /* transition */
  transition: background-color 0.1s ease-in;
}

.table .card-container.fadeOut {
  /* transition */
  transition: background-color 1s ease-out;
}

<!DOCTYPE html>
<html>

  <head>
    <title>CSS Transition Test</title>
  </head>

  <body>
    <div class="container" align="center">
      <table class="table">
        <tr>
          <td class="main-row" align="center">
            <table>
              <td class="card-container" id="foo">
                <table class="card-table">
                  <tr>
                    <td class="card-cell-left icon">+</td>
                    <td class="card-cell-right ticker">Test</td>
                  </tr>
                </table>
              </td>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </body>

</html>

【问题讨论】：

标签： javascript html css css-transitions

【解决方案1】：

您可以在不使用单独的类的情况下执行此操作。使用 CSS @keyframes:

body {
  background-color: rgb(0, 39, 59) !important;
}

.table {
  /*border: 3px solid DeepSkyBlue;*/
  /*table-layout: fixed;*/
  width: 610px;
}

.table .main-row {
  border: 4px solid rgb(0, 49, 74);
  background-color: rgb(0, 39, 59);
}

.table .card-container {
  border: 1px solid rgb(0, 70, 106);
  background-color: rgb(2, 33, 46);
  width: 10em;
  margin: auto;
  table-layout: fixed;
  padding: 4px 4px;
  animation: fade 3s infinite;
}

.table .ticker {
  color: rgb(159, 235, 252);
}

.table .icon {
  color: rgb(252, 205, 159);
}

@keyframes fade {
  0%   { background-color: rgb(2, 33, 46); }
  63.333%  { background-color: rgb(2, 33, 46); }
  66.667%  { background-color: rgb(11, 83, 69); }
  100% { background-color: rgb(2, 33, 46); }
}

<div class="container" align="center">
  <table class="table">
    <tr>
      <td class="main-row" align="center">
        <table>
          <td class="card-container" id="foo">
            <table class="card-table">
              <tr>
                <td class="card-cell-left icon">+</td>
                <td class="card-cell-right ticker">Test</td>
              </tr>
            </table>
          </td>
        </table>
      </td>
    </tr>
  </table>
</div>

时间可能略有不同。您可以通过操纵类的过渡持续时间和动画的停止点（以百分比给出）来控制时间。

编辑：我已经修改了动画，使其与您在 JavaScript 中制作的动画完全匹配。动画时长计算如下：

淡入持续时间 = 0.1 秒

淡出持续时间 = 1 秒

总过渡持续时间 = 3 秒

开始延迟 = 时间间隔 - 淡入 - 淡出 = 3 - 0.1 - 1 = 1.9 秒

延迟百分比 = 1.9 ÷ 3 × 100 = 63.333 秒

淡入百分比 = 0.1 ÷ 3 × 100 = 3.333 秒

动画的其余部分是淡出。

【讨论】：

是的。谢谢。我需要它们是连续的事件：首先淡入，然后立即淡出，链接在一起。这就是我尝试跟踪end-of-transition 事件的原因，因此我可以在第一个转换完成后立即触发第二个转换。
非常感谢。这是一个非常有趣的解决方案，但我试图通过一个函数来控制它。因此，在我的问题中是 updateCard() 函数。关于如何通过函数控制闪烁的任何想法，所以它只在调用函数时发生。
我想我有一个解决方案在这里工作。虽然我猜你的解决方案依赖于setTimeout() 来利用动画并在它无限循环时从中退出：jsfiddle.net/cryptoeraser/v38egobx/35
你做得比我的好;)
请你看看这个最后的小提琴：jsfiddle.net/cryptoeraser/f3kdj9n0 我已经通过一个全局 css 变量将动画持续时间（在 css 中）链接到 js 闪烁持续时间，以便它们保持同步。如果您认为这是基于您的回答的可行解决方案，我很乐意接受您的回答。谢谢。

【解决方案2】：

您可以尝试将transition-delay 添加为transition 属性的第四个参数：

.table .card-container.fadeOut {
    transition: background-color 1s ease-out 1s;
}

【讨论】：