jQuery .show 结合 CSS 过渡答案

【问题标题】：jQuery .show combined with CSS transitionjQuery .show 结合 CSS 过渡
【发布时间】：2015-07-10 01:28:37
【问题描述】：

来自Animate element transform rotate（Dyin 的回答）我仍然无法让它正常工作。

我想用 jQuery .show() 淡入一个 div。这个 div 包含一个 img。现在我希望在 .show() 命令的一开始就使用 css 转换和缩放（不是 jQuery，因为它更平滑）来缓慢放大 img。

简而言之：我希望 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);
}

任何帮助将不胜感激！

【问题讨论】：

你能提供给我们一个jsfiddle你目前的进展吗？
你为什么不也用 CSS 淡入？
哇，有时候很简单，谢谢！

标签： jquery css css-transitions show

【解决方案1】：

非常感谢杰里米·蒂勒！最简单的解决方案是使用完整的 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");

现在，同时淡入和扩展工作！谢谢！

【讨论】：