CSS卡翻转内容被延迟

Question

我正在使用一个正面和背面都有内容的卡片翻转动画网站。动画是通过CSS完成的，当悬停在上面时会被激活，这很好。

我的问题是，我包含了一个绝对位于背面的<a>标签。任何卡的第一次翻转都会导致在显示背面内容之前的延迟。这可以在这个jsfiddle上看到。

我已经将问题缩小到position: absolute属性引起的问题，因为当我删除那一行时，没有延迟，但无论描述文本有多长或多大，我都希望链接位于卡的底部。你知道如何避免这种延迟吗？第一次翻转后没有延迟，尽管不会破坏整个网站，但这并不理想。

Answer 1

如果只有绝对位置是问题所在，则删除它并使用flex来实现它。

如果你想学习flex，那么flexbox蛙泳是学习它的有趣方式。

我也对你们的小提琴做了同样的改动。

.projectCardWrapper {
width: 300px;
height: 150px;
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
.projectCard {
background-color: orange;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1s ease;
border-radius: 10%;
}
.projectCard:hover {
transform: rotateY(180deg);
}
.front {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
}
.projectName {
font-size: 40px;
}
.back {
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(180deg);
backface-visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.projectLink {
color: white;
text-decoration: none;
border: 2px solid white;
padding: 3px;
font-size: larger;
margin-top: auto;
margin-bottom: 5%;
}

<div class="projectCardWrapper cardWrapper">
<div class="projectCard card">
<div class="front">
<p class="projectName">abc</p>
</div>
<div class="back">
<p class="projectDescription">Description</p>
<a href="test.html" class="projectLink">More</a>
</div>
</div>
</div>