如何为"hide"进行不同的过渡，比较其"show"

Question

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

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

这是它的演示-jsFiddle

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

现在，我想在它上应用隐藏（从显示到隐藏），只在它的不透明度上应用动画，这样它就会从opacity : 1变成opacity : 0（没有height , width的变化）而消失，就像这样-jsFiddle。

更新：

我想把第一个jsFiddle的"显示到隐藏"变成第二个jsFiidle的"展示到隐藏"，而不改变第一个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演示