Question

我正在构建一个像MixItUp这样的jQuery排序插件，我遇到了一个弄乱整个脚本的问题。

简而言之：我需要能够transform: scale(0, 0); <div>之前transform: translate(Xpx, Ypx); <div>但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); }); });会立即隐藏。

我把它缩小到a JSFiddle that easily reproduces the problem。

的jQuery ：

<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>

HTML ：

.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;
}

CSS ：

hide

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

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

我确保除了jQuery之外没有加载任何外部库。

这是我第一次使用func keyboardWillShow(notification: NSNotification) { if let keyboardSize = (notification.userInfo?[UIKeyboardFrameBeginUserInfoKey] as? NSValue)?.CGRectValue() { let contentInsets = UIEdgeInsets(top: 0, left: 0, bottom: keyboardSize.height, right: 0) textView.contentInset = contentInsets } } CSS属性，我可能错过了一些明显的东西，但我的研究没有显示任何相关内容。

Answer 1

根据@Xufox＆＃39; comment，我需要一次设置两个值，如下所示：

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

无法缩放为（0,0）已经变换的<div>：translate（）;

1 个答案: