动画 addClass + removeClass 过渡？答案

【问题标题】：Animate addClass + removeClass transitions?动画 addClass + removeClass 过渡？
【发布时间】：2013-08-14 05:07:17
【问题描述】：

假设我有 2 个框，其中一个使用此类位于屏幕的左上角：

.position1 {
    position: fixed;
    top: 100px;
    left: 100px;
}

另一个使用这个类位于右下角：

.position2 {
    position: fixed;
    bottom: 100px;
    right: 100px;
}

有没有一种简单的方法，使用 jQuery 或其他方式：

将左上角的框滑动（动画）到右下角的位置
将右下角的框滑动（动画）到左上角的位置

我可以通过简单的.addClass() 和.removeClass() 轻松实现此不使用动画...但我需要动画本身来模仿盒子彼此“切换位置”而不是而不是瞬间换边。

我查看了 jQuery animate 功能，但除非我弄错了，否则它没有显示您可以应用预定义类（并删除预定义类）作为 animate 函数的选项.

【问题讨论】：

模仿盒子相互“交换位置”，而不是瞬间交换边。这过于理论化了。

标签： jquery jquery-animate css-transitions

【解决方案1】：

看这里：jQuery.animate() with css class only, without explicit styles 或这里：http://api.jqueryui.com/switchClass/

【讨论】：

【解决方案2】：

您也可以为此使用过渡。您可能在使用原始 CSS 时遇到的一个问题是您无法在像素值和初始（无属性）值之间进行转换。

这是一个简单转换的简单示例（仅限 webkit），我相信它可以满足您的要求：

CSS

.changer {
    -webkit-transition: all 2s ease;
}

#one { background-color: blue; }
#two { background-color: red; }

.position1 {
    position: fixed;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;    
}

.position2 {
    position: fixed;
    top: 200px;
    left: 200px;
    width: 100px;
    height: 100px;    
}

HTML

<div id="one" class="changer position1"></div>
<div id="two" class="changer position2"></div>

Javascript（在卸载时运行超时，只是对示例有一点延迟）

window.setTimeout(function() {
    var one = document.getElementById('one');
    var two = document.getElementById('two');  

    one.classList.remove('position1');
    one.classList.add('position2');
    two.classList.remove('position2');
    two.classList.add('position1');
}, 500);

Working Fiddle

【讨论】：