Question

我希望在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>

Answer 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秒

其余的动画是淡出的。

Answer 2

您可以尝试将public boolean onContextItemSelected(MenuItem item) { AdapterView.AdapterContextMenuInfo menuInfo = (AdapterView.AdapterContextMenuInfo) item.getMenuInfo(); switch (item.getItemId()) { case R.id.menuMarcar: if (comprobarNumero((Integer) gridView.getAdapter().getItem(menuInfo.position))) {//Llamo a la funcion comprobar numero //EN ESTA PARTE DEBERIA DE PODER DESHABILITAR LA CASILLA DEL GRIDVIEW CON EL NUMERO QUE YA HA SALIDO } return true; } return super.onContextItemSelected(item); }添加为transition-delay属性的第四个参数：

transition

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

2 个答案: