javascript - 播放后如何重置 CSS 过渡
问题描述
如果你按下空格键,我会出现一个加号。但现在它出现了一次。你能帮我让它在我每次按空格键时出现吗?这是我的代码笔。
import './style.scss';
let counter = 0;
document.addEventListener('keydown', ({ keyCode }) => {
const increment = document.getElementsByClassName('increment')[0];
if (keyCode === 32) {
counter++;
document.getElementsByClassName('counter')[0].innerText = counter;
increment.classList.remove('hidden');
increment.classList.add('move-increment');
}
});
.container {
/* ... */
.counter {
background-color: gray;
color: white;
border-radius: 10px;
padding: 10px;
}
.move-increment {
margin-top: -20px;
opacity: 0;
}
.hidden {
visibility: hidden;
}
.increment {
position: absolute;
margin-left: -33px;
z-index: 1;
transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1),
opacity 1s ease-in-out;
}
}
解决方案
尽管我认为@ikiK 的答案是正确的答案,因为这个问题是专门关于使用 CSS 过渡的,但我想分享一种不同的方法。我认为“加号”图标的目标是在每次计数器增加时显示。但是当计数器增加而前一个增量的转换仍在播放时,不可能显示第二个“加号”符号。
我的建议是使用一些 jQuery,并在每次增量时,将一个新li
项目附加到位于计数器顶部的无序列表中。动画li
,淡出到顶部。然后使用 的回调函数在元素淡出视图后从 DOManimate()
中删除该元素。li
let counter = 1;
$(document).on( 'keypress',function(e) {
if( e.which == 32 ) {
$('.counter').text(counter++);
let increment = $('<li><span class="increment">+</span></li>');
$('#increments').append(increment);
increment.animate({
opacity: 0,
top: '-=30px'
}, 500, function() {
increment.remove();
});
}
});
.container {
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-weight: bold;
display: flex;
height: 500px;
align-items: top;
justify-content: center;
position: relative;
overflow: hidden;
height: 100px;
}
.counter {
background-color: gray;
color: white;
border-radius: 10px;
padding: 10px;
}
#increments {
padding: 0px;
z-index: 1;
float: left;
margin-left: -33px;
list-style: none;
}
#increments li {
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<p>Counter: <span class="counter">0</span></p>
<ul id="increments"></ul>
</div>
推荐阅读
- modbus-tcp - 已安装 Modbus 命令但无法正常工作
- c++ - 该程序给出了错误的闰年输出负载变量的值是错误的我认为Ex.1900,1700
- html - 如何将表格行的高度设置为 0 像素?
- python - 使用 Watchgod 监视特定文件的更改,然后暂停进程(删除文件内容而不创建循环)
- discord.py - 如何发出验证禁令命令?
- python - 如何使用 Python 查找月份的结束日期并转换日期格式
- python - Django RestAPI - AssertionError:期望返回“Response”、“HttpResponse”或“HttpStreamingResponse”
- java - 如何使用服务器基础目录和 settings.xml 在 IntelliJ 中配置 JBoss 服务器
- spring - 使用 JWT 的 Spring Boot 授权
- java - 从 FirebaseFirestore 检索文档数组 --> Java Android