无法缩放到 (0, 0) 已转换的 <div>：translate();

Question

我正在构建一个 jQuery 类似 MixItUp 的排序插件，但我遇到了一个让整个脚本混乱的问题。

简而言之：我需要能够 transform: scale(0, 0); 之前 transform: translate(Xpx, Ypx); 的 <div> 但是 <div> 在立即隐藏之前一直返回。

我已经缩小到 a JSFiddle that easily reproduces the problem。

jQuery:

jQuery(function($) {

    var applyTransform = function($box, value) {
        $box.css({
            '-webkit-transform': value,
            '-moz-transform': value,
            '-o-transform': value,
            '-ms-transform': value,
            'transform': value
        });        
    };

    $('button').on('click', function(e) {
        e.preventDefault();
        var boxId = $(this).data('box')
            , action = $(this).data('action')
            , value
        ;

        switch(action) {
            case 'translate':
                value = 'translate(200px, 100px)';
                break;
            case 'show':
                value = 'scale(1, 1)';
                break;
            case 'hide':
                value = 'scale(0, 0)';
                break;           
        }

        applyTransform($('#box-' + boxId), value);

    });
});

HTML:

<div class="box" id="box-0">0</div>
<div class="box" id="box-1">1</div>
<div class="box" id="box-2">2</div>
<hr/>
<button data-action="translate" data-box="1">translate</button>
<button data-action="show" data-box="1">show</button>
<button data-action="hide" data-box="1">hide</button>

CSS:

.box {
    width: 150px;
    height: 150px;
    margin: 10px;
    display: inline-block;
    border: 1px solid red;
    text-align: center;
    font-size: 3em;

    -webkit-transition: all 1500ms ease;
    -moz-transition: all 1500ms ease;
    -ms-transition: all 1500ms ease;
    -o-transition: all 1500ms ease;
    transition: all 1500ms ease;
}

您需要按照以下步骤操作：

点击hide：<div>的比例变为0
单击 show：<div> 获取其初始比例
点击translate：<div>移开
单击 hide：<div> 不是隐藏，而是采用其初始位置，等待，立即隐藏。

我确保没有加载外部库，除了 jQuery。

这是我第一次玩 transform CSS 属性，我可能遗漏了一些明显的东西，但我的研究没有显示任何相关的东西。

Answer 1

根据 @Xufox's ，我需要同时设置两个值，如下所示：

transform: translate(200px, 100px) scale(0,0);

无法缩放到 (0, 0) 已转换的 <div>：translate();

Cannot scale to (0, 0) a <div> that has been transform: translate();

javascript

css

jquery

css-transforms