CertainPerformance
2020-12-01 11:50:45
The transitionend event contains a propertyName property, which refers to the property transition that ended. Here, you can examine the event to check which property caused the event to fire. Since the longest transition is the border radius, check if the propertyName is one of the border radiuses:
function changeStyle() {
const elem = document.getElementById("elem");
const logs = document.getElementById("logs");
elem.style.backgroundColor = "red";
elem.style.borderRadius = "30px";
elem.ontransitionend = (e) => {
if (e.propertyName === "border-bottom-right-radius") {
logs.insertAdjacentText("beforeend", "transition ended");
}
}
}#elem {
height: 100px;
width: 100px;
color: white;
background-color: blue;
transition: background-color 0.5s, border-radius 0.6s;
}<div onclick="changeStyle()" id="elem">
click me !
</div>
<span id="logs"></span>热门帖子
热门github
6