Question

当我将鼠标悬停在div上时，.note跨度淡入。淡入后，字体重量似乎突然增加（变得更大胆）。我意识到在fiddle中没有图像，但不需要看到我的问题。

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
    <title>Cool Effect</title>
</head>
<body>

    <div class="imageHolder">
        <img src="picture1.jpeg">
        <span class="note">Hello!</span>
    </div>

</body>
</html>

CSS：

.imageHolder {
    position: relative;
    top:300px;
    left: 300px;
    width: 300px;
    height: 250px;
    text-align: center;
    overflow: hidden;
    background-color: black;
}

.note {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid white;
    padding: 8px;
    color: white;
    font-size: 24px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

img {
    width: 300;
    opacity: 1;
    height: 250px;
}

.imageHolder:hover .note {
    opacity: 1;
}

感谢。

Answer 1

使用3d变换（即使用硬件加速）修复了许多渲染问题。

.note {
    ...
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    ...
}

This是well documented

DEMO

或者，这似乎也适用于您的示例，可能有更好的浏览器支持...

.note {
    ...
    -webkit-backface-visibility: hidden;
    ...
}

DEMO

Answer 2

请注意以下更改：

UIApplication.sharedApplication().openURL(NSURL(string: UIApplicationOpenSettingsURLString)!)

虽然转换速度稍微快一些，但这解决了小提琴中的问题。

在CSS过渡结束时跳转

2 个答案: