我想在 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 秒
其余的动画是淡出。
关于javascript - 创建具有不同开始和结束行为的 CSS 过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53923221/