html - 与它的“显示”相比，如何为 "hide"进行不同的转换

Question

假设我有切换功能，可以在 div 的 height 、width 和 opacity 上制作动画 -

transition: width 2s, height 2s , opacity 2s,transform 2s;

这是它的演示 - jsFiddle

当它从隐藏变为显示时，所有这 3 个属性都有动画，

现在，我想在其不透明度上应用隐藏(从显示到隐藏)动画，使其从 opacity : 1 变为 opacity : 0 (没有 height , width 变化)- like this - jsFiddle .

更新:

我想将第一个 jsFiddle 的“显示隐藏”设置为第二个 jsFiddle 的“显示隐藏”，而不更改第一个 hsFiddle 的“隐藏显示”。

如何获得？

Answer 1

您可以通过使用 CSS Transform scale 来实现.

您可以将其应用于您的切换函数 ()。

像这样:

$('.testDiv').css({
    '-webkit-transform': 'scale(1)',
    '-moz-transform': 'scale(1)',
    '-o-transform': 'scale(1)'
});

并还原:

$('.testDiv').css({
    '-webkit-transform': 'scale(0)',
    '-moz-transform': 'scale(0)',
    '-o-transform': 'scale(0)'
});

jsFIDDLE DEMO