jquery - 悬停时的 Chrome 过渡错误

Question

如何修复 Chrome transition 中 :hover 的错误？一些 :hover 正常，然后不起作用。也许我需要 jQuery 解决方案？

我举个例子，所有transition时是否有这样的bug:

.item {
    background: rgba(106, 204, 201, 1);
    background: -moz-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(106, 204, 201, 1)), color-stop(100%, rgba(109, 177, 244, 1)));
    background: -webkit-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -o-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -ms-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: linear-gradient(to bottom, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6accc9', endColorstr='#6db1f4', GradientType=0);
    width: 300px;
    height: 150px;
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.item:hover {
    opacity: 0.5;
    transition: opacity 1s;
}

.title {
    position: absolute;
    top: 20%;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translate(0, 0);
}

.item:hover .title {
    transform: translate(0, -20px);
    -webkit-transform: translate(0, -20px);
    -o-transform: translate(0, -20px);
    -moz-transform: translate(0, -20px);
}

<div class="item">
    <div class="title">title1</div>
</div>
<div class="item">
    <div class="title">title2</div>
</div>

Answer 1

尝试 this :

.item {
    background: rgba(106, 204, 201, 1);
    background: -moz-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(106, 204, 201, 1)), color-stop(100%, rgba(109, 177, 244, 1)));
    background: -webkit-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -o-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: -ms-linear-gradient(top, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    background: linear-gradient(to bottom, rgba(106, 204, 201, 1) 0%, rgba(109, 177, 244, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6accc9', endColorstr='#6db1f4', GradientType=0);
    width: 300px;
    height: 150px;
    display: inline-block;
    position: relative;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

    .item:hover {
        opacity: 0.5;
        transition: opacity 1s;
    }

.title {
    position: absolute;
    top: 20%;
    -webkit-transition: -webkit-transform 1s ease-in-out;
    -moz-transition: -moz-transform 1s ease-in-out;
    -o-transition: -o-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

    .item:hover .title {
        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);
    }

<div class="item">
    <div class="title">title1</div>
</div>
<div class="item">
    <div class="title">title2</div>
</div>

在 OS X 10.10.4 和 Windows 8.1 上的最新 Chrome(版本 44.0.2403.130)中没有发现任何错误。