如何使用CSS3过渡动画使元素在隐藏某些元素后移动

Question

使用jQuery的.fadeOut()隐藏某些元素后，是否可以使用CSS3转换使元素移动？

我在这里找到了一种解决方案（请参见“也适用于网格”部分）：http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/ 然而，我的情况更像是这样：http://jsfiddle.net/CUzNx/5/

<div class="container">
    <div id="item1" class="item">Test1</div>
    <div id="item2" class="item">Test2</div>
    <div id="item3" class="item">Test3</div>
    <div id="item4" class="item">Test4</div>
    <div id="item5" class="item">Test5</div>
    <div id="item6" class="item">Test6</div>
    <div id="item7" class="item">Test7</div>
</div>

<div style="clear:both">
<button onclick="$('#item1').fadeOut();">
   Hide first
</button>
<button onclick="$('#item1').fadeIn();">
   Show first
</button>
</div>

我有一些浮动的div元素，当某个元素被隐藏后，如果其他元素能够以动画效果显示出来，那就太好了。这是可行的吗？

- Lauri

Answer 1

您可以使用类似于这样的东西来实现您所需的功能，它使用由一些JavaScript和CSS过渡切换的CSS类，而不是使用jQuery。 这里 是一个示例。

// The relevant CSS
.item {
    // Your original code here
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.hide {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

// The JavaScript
var items = document.getElementsByClassName('item');
for(var i = 0; i < items.length; i ++) {
    items[i].onclick = function() {
        this.classList.toggle('hide');
    }
};

function addBack() {
    for(var i = 0; i < items.length; i ++) {
        items[i].classList.remove('hide');
    }
}

我还将您的按钮删除，并添加了一个“全部添加回来”的按钮：

<button onclick='addBack()'>Add all elements back</button>

如果您已经在项目中的其他地方使用了jQuery，我也制作了这个 jQuery版本。以下是该版本的JavaScript代码：

function addBack() {
    $('.item').each(function() {
        $(this).removeClass('hide');
    });
}

$('.item').on('click', function() {
    $(this).toggleClass('hide');
});

此外，您不需要为任何内容提供ID，因此如果您愿意，可以删除它们。

- Zach Saucier

---

谢谢，这正是我所需要的。顺便说一下，我使用Bootstrap，并且已经引入了“hide”类，所以一开始花了一些时间才弄清楚为什么解决方案不起作用。 - Lauri

Answer 2

你不需要使用CSS过渡效果，只需使用.hide()代替.fadeout()即可。

<button onclick="$('#item1').hide(400);">
    Hide first
</button>

请看这里：https://jsfiddle.net/st1o8ngp/

- Adam

---

虽然这对某些情况可能有效，但添加回隐藏元素的行为在根本上是不同的。 - Zach Saucier

Answer 3

一种方法是用占位符替换要删除的 div，然后同时动画占位符和原始元素。

使用此代码片段：使用 jQuery 将元素定位在另一个元素上 您的代码可以更改为类似以下内容（我在项目上使用了点击来触发删除）： 演示 CSS

div { box-sizing: border-box; }

.item, .placeholder {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 5px;
    position: relative;
    background: white;
    -webkit-transition: all 1s ease;
}

.placeholder {
    opacity: 0;
    border: 0px;
}

.item.hide {
    border: 1px solid rgba(0,0,0,0);
    margin: 0px;
    top: 500px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.placeholder.hide {
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
}

脚本

$('.item').on('click', function(evt) {
    var $this = $(this);
    var $new  = $($this.clone());

    $new.addClass('placeholder');
    $this.replaceWith($new);

    $this.positionOn($new);
    $this.appendTo($('body'));

    setTimeout(function() {
        $this.css({top: '', left: ''});
        $this.addClass('hide');
        $new.addClass('hide');  
    }, 0);
});

代码片段来自：使用jQuery将一个元素定位在另一个元素之上

// Reference: http://snippets.aktagon.com/snippets/310-positioning-an-element-over-another-element-with-jquery
$.fn.positionOn = function(element, align) {
  return this.each(function() {
    var target   = $(this);
    var position = element.position();

    var x      = position.left; 
    var y      = position.top;

    if(align == 'right') {
      x -= (target.outerWidth() - element.outerWidth());
    } else if(align == 'center') {
      x -= target.outerWidth() / 2 - element.outerWidth() / 2;
    }

    target.css({
      position: 'absolute',
      zIndex:   5000,
      top:      y, 
      left:     x
    });
  });
};

现在您的旧div会在网格折叠时以动画方式移开。

如果您愿意将另一个库添加到您的代码中，请查看Masonry/Isotope by Metafizzy。它们专门设计用于处理这种情况。

- dc5