动画addClass+removeClass转换

Question

假设我有两个盒子，其中一个放在屏幕左上角，使用这个类：

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

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

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

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

• 将左上角的长方体滑动（设置动画）到右下角的位置
• 将右下角的长方体滑动（设置动画）到左上角的位置

通过简单地执行.addClass()和.removeClass()，我可以在不使用动画的情况下轻松实现这一点。。。但我需要动画本身来模仿盒子之间的"交换位置"，而不仅仅是瞬间交换侧面。

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

Answer 1

看这里：jQuery.animate（）只带css类，没有显式样式或这里：http://api.jqueryui.com/switchClass/

Answer 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);

工作Fiddle