mbi*_*nov 8 html javascript css css-transitions
我想在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 {\r\n background-color: rgb(0, 39, 59) !important;\r\n}\r\n\r\n.table {\r\n /*border: 3px solid DeepSkyBlue;*/\r\n /*table-layout: fixed;*/\r\n width: 610px;\r\n}\r\n\r\n.table .main-row {\r\n border: 4px solid rgb(0, 49, 74);\r\n background-color: rgb(0, 39, 59);\r\n}\r\n\r\n.table .card-container {\r\n border: 1px solid rgb(0, 70, 106);\r\n background-color: rgb(2, 33, 46);\r\n width: 10em;\r\n margin: auto;\r\n table-layout: fixed;\r\n padding: 4px 4px;\r\n animation: fade 3s infinite;\r\n}\r\n\r\n.table .ticker {\r\n color: rgb(159, 235, 252);\r\n}\r\n\r\n.table .icon {\r\n color: rgb(252, 205, 159);\r\n}\r\n\r\n@keyframes fade {\r\n 0% { background-color: rgb(2, 33, 46); }\r\n 63.333% { background-color: rgb(2, 33, 46); }\r\n 66.667% { background-color: rgb(11, 83, 69); }\r\n 100% { background-color: rgb(2, 33, 46); }\r\n}<div class="container" align="center">\r\n <table class="table">\r\n <tr>\r\n <td class="main-row" align="center">\r\n <table>\r\n <td class="card-container" id="foo">\r\n <table class="card-table">\r\n <tr>\r\n <td class="card-cell-left icon">+</td>\r\n <td class="card-cell-right ticker">Test</td>\r\n </tr>\r\n </table>\r\n </td>\r\n </table>\r\n </td>\r\n </tr>\r\n </table>\r\n</div>时间可能略有不同。您可以通过操纵类的过渡持续时间和动画的停止点（以百分比给出）来控制时间。
\n\n编辑：我已经修改了动画，使其与您在 JavaScript 中制作的动画完全匹配。动画持续时间计算如下：
\n\n淡入持续时间 = 0.1 秒
\n\n淡出持续时间 = 1 秒
\n\n总转换持续时间 = 3 秒
\n\n开始延迟 = 时间间隔 - 淡入 - 淡出 = 3 - 0.1 - 1 = 1.9 \n秒
\n\n延迟百分比 = 1.9 \xc3\xb7 3 \xc3\x97 100 = 63.333 秒
\n\n淡入百分比 = 0.1 \xc3\xb7 3 \xc3\x97 100 = 3.333 秒
\n\n动画的其余部分是淡出的。
\n| 归档时间： |
|
| 查看次数： |
78 次 |
| 最近记录： |