Question

我有两个容器：

<div class="left">
    <div id="myDiv">A Div</div>
    <div id="myDiv2">A Div</div>
</div>
<div class="right">
    <div id="myDiv3">A Div</div>
</div>

第一个包含div元素，使用以下jQuery移动：

$(".left > div").click(function(){
    $(this).appendTo('.right');
});

但是，上面没有提供动画。我想使用CSS transition为两个父元素（从div到.left）之间的每个.right制作动画。

顺便说一下，这是我的CSS：

.left, .right{
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 50%;
    height: 100%;
}
.left{background:red;}
.right{background:green; left: 50%;}
.left > div, .right > div{
    display: block;
    height: 100px;
    width: 100px;
    margin: 10px;
    float: left;
    background: #fff;
    color: #000;
}

小提琴：http://jsfiddle.net/x270Lndz/

我认为我需要在.left和.right之外获取它们之间的坐标和转换。

Answer 1

已经回答：https://stackoverflow.com/a/974765/2725684

问题是两部分，DOM中的移动元素，以及动画的动画，但建议是：

将div处于静止状态的位置存储在第一列中。
将div附加到第二列，存储该位置。
关闭div的可见性。
创建一个div的克隆，位于休息状态所在的位置。
将此克隆设置为附加div的位置。
关闭此克隆的可见性。
转回附加的原始div。

javascript / jquery将以如此快的速度执行此操作，您将看不到div的关闭/打开，它只会看起来好像他们看到的div是唯一存在的div。

Answer 2

尝试将transition: 0.5s ease-in添加到.left div

Answer 3

最终，这将是一项很多工作，我认为我没有时间完整地写出每一步。但是，如果你承诺，请点击：

在第一个元素上调用getBoundingClientRect()或类似内容，以获取相对于文档/视口的绝对文档位置。
使用相同的函数和getComputedStyle()填充来确定内容在第二个div中开始的确切像素。
确定两个坐标之间的差异，以便在元素仍在第一个父元素内时伪造转换。（或者，首先移动它们，并在之后伪造转换）
将正确的transform: translate样式应用于元素，以便它们看起来移动到另一个容器中。（假设您在CSS中正确设置了过渡属性）
在transitionend事件中，关闭转场，移除转换属性，然后执行实际的子移动。
拍拍自己的背部，早点回家。

所以你有它。可能会涉及很多数学和我无法预测的小的加法/减法。希望这个大纲可以帮助您至少开始。您可能也很幸运地找到了一个能够为您完成所有这些工作的动画库。（另请注意，我假设所有浏览器都不支持多种功能，因此请检查以确保它们可以通过您的书）

Answer 4

我写了一个jQuery插件：

$.fn.transitionTo = function(target){
    this.each(function(){
        $this = $(this);
        marginLeft = parseInt($this.css('marginLeft').replace("px", "")); 
        marginTop = parseInt($this.css('marginTop').replace("px", ""));
        offset = $this.offset();
        $new = $this.clone().appendTo(target);
        offsetNew = $new.css('opacity',0).offset();
        $this.css({
            position: 'absolute',
            left: offset.left - marginLeft,
            top: offset.top - marginTop
        }).appendTo("body");
        setTimeout(function(a,b){
            a.css({
                left: offsetNew.left - marginLeft,
                top: offsetNew.top - marginTop
            });
            setTimeout(function(a,b){
                b.replaceWith(a.removeAttr('style'));
            },2000,a,b); //Anim time
        },10,$this,$new);
    });
};

与.appendTo类似地调用它：

$(".left > div").click(function(){
    $(this).transitionTo('.right');
});

...只需要transition: top 2s ease, left 2s ease;上的div。

小提琴：http://jsfiddle.net/d9yxrmvo/1/

这个插件唯一已知的问题是缺乏动画原始元素的兄弟姐妹的动画。

如何在两个父母之间转换div？

4 个答案: