jQuery .show 结合 CSS 过渡

Question

来自Animate element transform rotate (Dyin 的回答)我仍然无法正常工作。

我想使用 jQuery .show() 在 div 中淡入淡出。这个 div 包含一个 img。现在我希望 img 在 .show() 命令的最开始使用 css transition 和 scale(不是 jQuery，因为它更平滑)缓慢放大。

简而言之:我希望 div 在包含的 img 缩放时淡入(同时显示和缩放)。但我只能在 .show() 函数完成后设法缩放，就像这样:

$( this ).show(800, function(){
    $( ".bullets" ).removeClass("wait");
    $( this ).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin");
});

如果我将 .addClass() 放在函数外部，该类将添加到源代码中，但 img 根本不会缩放，如下所示:

$( this ).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin");
$( this ).show(800, function(){
    $( ".bullets" ).removeClass("wait");

})

CSS:

.zoomin {
    transition: 24s linear;
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}
.zoomout {
    transition: 24s linear;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

任何帮助将不胜感激!

Answer 1

非常感谢 Jeremy Thille!最简单的解决方案是使用完整的 CSS:

我只是添加了两个类，而不是 jQuery .show():.visible 和 .hidden

.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
}
.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

并将它们添加到/从父 DIV 中移除:

$( this ).removeClass("hidden").addClass("visible");
$( this ).find(".csc-textpic-image img").removeClass("zoomout").addClass("zoomin");

现在，淡入和缩放可同时进行!谢谢!