javascript - 链接多个“transitionend”事件监听器
问题描述
我想使用带有“transitionend”的 EventListenner 链接多个图像,例如我有一个石头剪刀布游戏,每次单击其中一个按钮播放时,我希望图像从石头旋转,到纸,最后到剪刀,每次都等待过渡结束,然后再次交换图像,模拟现实生活中的游戏交互。我已经设法链接其中一个转换,但我坚持如何为多个连续"transitionend"
事件执行此操作的逻辑
let images = ['https://adiihd.github.io/rock-paper-scissors-game/img/rock.png', 'https://adiihd.github.io/rock-paper-scissors-game/img/paper.png', 'https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png'];
const buttons = document.querySelectorAll('button');
// we use the .forEach method to iterate through each button
buttons.forEach((button) => {
// and for each one we add a 'click' listener
button.addEventListener('click', (e) => {
let userImg = document.querySelector("#userimg");
userImg.classList.add("playing");
userImg.addEventListener('transitionend', () => {
userImg.classList.remove("playing");
userImg.setAttribute('src', images[1]);
});
userImg.addEventListener('transitionend', () => {
userImg.classList.remove("playing");
userImg.setAttribute('src', images[2]);
});
});
});
#userimg {
transition: all 0.4s ease;
width: 200px;
}
.playing {
transform: rotate(30deg);
}
<img id="userimg" src="https://adiihd.github.io/rock-paper-scissors-game/img/rock.png">
<br>
<button id="Rock">Rock</button>
<button id="Paper">Paper</button>
<button id="Scissors">Scissors</button>
解决方案
等待 transitionend 可能会导致更多的问题而不是它的价值。我不确定您的浏览器兼容性要求,但如果您可以使用动画,我建议您使用它们:
let images = ['https://adiihd.github.io/rock-paper-scissors-game/img/rock.png', 'https://adiihd.github.io/rock-paper-scissors-game/img/paper.png', 'https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png'];
const buttons = document.querySelectorAll('button');
// we use the .forEach method to iterate through each button
buttons.forEach((button) => {
// and for each one we add a 'click' listener
button.addEventListener('click', async (e) => {
let userImg = document.querySelector(".userimg");
userImg.classList.remove("userimg-animation");
// Force a reflow, see https://css-tricks.com/restart-css-animation/
userImg.offsetWidth;
userImg.classList.add("userimg-animation");
userImg.setAttribute("choice", button.id.toLowerCase());
});
});
.imageHolder {
position: relative;
display: inline-block;
}
.spacerimg {
opacity: 0;
}
.userimg-animation {
width: 100%;
height: 100%;
position: absolute;
animation-name: rockpaperscissors;
animation-duration: 1.2s;
}
.userimg {
background-repeat: no-repeat!important;
}
.userimg[choice="rock"] {
background: url(https://adiihd.github.io/rock-paper-scissors-game/img/rock.png);
}
.userimg[choice="paper"] {
background: url(https://adiihd.github.io/rock-paper-scissors-game/img/paper.png);
}
.userimg[choice="scissors"] {
background: url(https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png);
}
@keyframes rockpaperscissors {
0% {
background: url(https://adiihd.github.io/rock-paper-scissors-game/img/rock.png);
}
33.2% {
background: url(https://adiihd.github.io/rock-paper-scissors-game/img/rock.png);
}
33.3% {
background: url(https://adiihd.github.io/rock-paper-scissors-game/img/paper.png);
}
66.5% {
background: url(https://adiihd.github.io/rock-paper-scissors-game/img/paper.png);
}
66.6% {
background: url(https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png);
}
99.9% {
background: url(https://adiihd.github.io/rock-paper-scissors-game/img/scissors.png);
}
100% {
background: none;
}
}
<div class="imageHolder">
<div class="userimg"></div>
<img class="spacerimg" src="https://adiihd.github.io/rock-paper-scissors-game/img/rock.png">
</div>
<br>
<button id="Rock">Rock</button>
<button id="Paper">Paper</button>
<button id="Scissors">Scissors</button>
注意:我必须编写额外的关键帧以防止背景之间的动画(它们在彼此之间淡出)。但是您可能需要动画,因此如果您删除每个奇数关键帧,您将拥有更少的 CSS 并且它们将在彼此之间进行动画处理。
推荐阅读
- java - 索引匹配最大/最小分数 (Java)
- spring - 为 Java Maven Spring Web 项目设置 Eclipse
- ip - 如何从 ping 命令中仅提取 IP 地址
- android - MaterialTimePicker 需要用户点击三次
- spring - 有什么理由为什么当我用 @JoinColumn 注释参数时它停止工作但当我不工作时?
- highcharts - 如何在 Highcharts 中设置单个 x 轴标签的对齐方式
- javascript - 如何在 PHP url 中传递 javascript 变量?
- javascript - Google App Engine websocket 未向客户端广播
- django - Django set_cookie 在 Safari 上不起作用
- llvm - LLVM 中的 BasicBlock::getSingleSuccessor() 和 BasicBlock::getUniqueSuccessor() 有什么区别?