gpt4 book ai didi

CSS 转换有时会在 Chrome 中被跳过

转载 作者:行者123 更新时间:2023-11-28 08:46:30 24 4
gpt4 key购买 nike

我想在将鼠标悬停在图像上时翻转带有旋转动画的图像(请参见下面的代码)。将鼠标悬停在图像上时,它会绕其 x 轴旋转一秒钟(并在鼠标离开图像时返回)。

动画在 Firefox 和 Safari 中按预期工作。但是,Chrome 有时会跳过动画并立即翻转图像。我不知道如何可靠地重现这个问题,因为它通常会在动画被跳过之前工作几次。我已经录制了视频,所以你可以明白我的意思:https://www.youtube.com/watch?v=bpgi46F_5RU

这个 CSS 有问题吗? 我一开始怀疑是旋转 Angular 引起的,但其他类型的动画也会出现同样的问题。

.flippable-container {
float: left;
perspective: 1000px;
}

.flippable {
transition: transform 1s;
}

.flippable-container:hover .flippable {
transform: rotateX(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="flippable-container">
<img class="flippable" src="http://lorempixel.com/200/200/food"/>
</div>

编辑:正如 TylerH 评论的那样,它看起来像是 Chrome 中的错误。我在 David Walsh 的这个著名教程中看到了同样的问题:http://davidwalsh.name/css-flip .视频:https://www.youtube.com/watch?v=o_TViH4AmZ8 .该问题一定与鼠标交互有关,因为图像下方的“切换翻转”按钮工作正常。

最佳答案

我通过在所有可翻转元素上放置 z-index 和 position:relative 来解决这个问题。我不知道为什么这会影响它,但它似乎已经完成了工作。

示例:http://jsfiddle.net/L0duLu3c/2/

.flippable-container {
float: left;
perspective: 1000px;

}
.flippable {
transition: 0.6s;
z-index:10;
position:relative;
transform: rotateX(0deg);
}
.flippable-container:hover .flippable {
transform: rotateX(180deg);
z-index:20;
}

关于CSS 转换有时会在 Chrome 中被跳过,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31678578/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com