try 删除BigDiv类中的border属性并创建第二个伪类.我认为这可能是一个blink engine渲染问题.
BigDiv class
display: flex;
min-width: 220px;
height: 100%;
position: relative;
padding: ${theme.spacing(2, 0)};
border-bottom: orange 5px solid; /* remove this */
background-color: transparent;
cursor: pointer;
text-align: center;
transition-delay: 0.5s;
will-change: transform;
/* Add this */
::before {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 4px;
background-color: orange;
}
document.addEventListener('DOMContentLoaded', function() {
const click = document.querySelector('.big');
const click2 = document.querySelector('.big2');
click.addEventListener('click', e => {
e.currentTarget.classList.toggle('active');
});
click2.addEventListener('click', e => {
e.currentTarget.classList.toggle('active');
});
});
.big,
.big2 {
width: 220px;
height: 100%;
position: relative;
padding: 1rem 2rem;
background-color: transparent;
cursor: pointer;
text-align: center;
transition-delay: 0.5s;
will-change: transform;
}
.big {
border-bottom: orange 4px solid;
}
.big::after,
.big2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: orange;
animation: out 0.5s ease-in-out forwards;
transform-origin: bottom center;
}
.big2::before {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 4px;
background-color: orange;
}
.big.active::after,
.big2.active::after {
animation: in 0.5s ease-in-out forwards;
}
.second {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
z-index: 1;
}
@keyframes in {
0% {
transform: scaleY(0);
background-color: transparent;
}
100% {
transform: scaleY(1);
background-color: orange;
}
}
@keyframes out {
0% {
transform: scaleY(1);
background-color: orange;
}
100% {
transform: scaleY(0);
background-color: transparent;
}
}
<div class="big">
<div class="second">
<p>Click to animate with border</p>
</div>
</div>
<div class="big2">
<div class="second">
<p>Click to animate pseudo-class</p>
</div>
</div>
