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

我想在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>

您可以在不使用单独类的情况下执行此操作。使用 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 秒

动画的其余部分是淡出的。

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

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

相关内容

最新更新

热门标签：