-1

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

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

我已将问题缩小到由position: absolute属性引起的问题，因为当我删除该行时，没有延迟，但是我希望链接位于卡片底部，无论描述文本有多长或多长。关于如何避免这种延迟的任何想法？第一次翻转后没有延迟，即使不会破坏整个站点，也不是很理想。

4

1 回答 1

1

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

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

我也在你的小提琴中做了同样的改变。

.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>

于 2020-05-03T11:41:59.500 回答