Wie animieren Sie die Elemente bewegen sich mit css3-übergängen nach dem ausblenden element

Ist es möglich zu animieren, Elemente bewegen sich mit css3-übergängen nach dem ausblenden element mit jQuery .fadeOut()?

Fand ich eine Art Lösung hier (siehe "Werke für Gitter auch" - Abschnitt):

Aber mein Fall ist es eher so:
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>

Habe ich floatende div-Elemente und nach einigen element versteckt ist, wäre es schön, wenn andere Elemente, die animiert wurden. Ist es möglich?

InformationsquelleAutor Lauri | 2013-08-21

Könnten Sie tun, so etwas was nutzt eine CSS-Klasse ein-und ausgeschaltet durch ein wenig JavaScript und CSS-übergänge, um zu tun, was Sie suchen, anstelle der Verwendung von 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');
    }
}

Nahm ich auch aus deinen Tasten und zusätzlich eine "Fügen Sie alle Elemente zurück" - button:

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

Wenn Sie bereits mit jQuery irgendwo in Ihrem Projekt, das ich auch gemacht dieses jQuery version. Hier ist die JavaScript für diese:

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

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

Auch, Sie brauchen keine IDs für diese, damit Sie genommen werden kann, wenn Sie so bitte.

Danke, das macht genau das, was ich brauchte. Als eine Randnotiz, ich benutze Bootstrap, und es ist bereits eingeführt, 'hide' Klasse, so dauerte es einige Zeit, um herauszufinden, warum die Lösung nicht funktioniert zunächst.
+1 für nicht-jQuery-version enthalten

InformationsquelleAutor Zach Saucier

Ein Ansatz wäre zu ersetzen, die dem div entfernt werden mit einem Platzhalter, dann animieren Sie sowohl die Platzhalter und das original.

Mit diesem snippet: Positionierung ein element über ein anderes element mit jQuery

Kann der code geändert werden, um so etwas wie dieses (ich verwendet, klicken Sie auf den Eintrag, den Sie auslösen, die Entfernung von hier):

Demo

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

Skript

$('.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);
});

Ausschnitt aus: Positionierung ein element über ein anderes element mit 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
    });
  });
};

Nun Ihre alten, div animiert aus dem Weg, während bricht das Netz zusammen.

Wenn Sie bereit sind, fügen Sie eine weitere Bibliothek, um Ihren code, werfen Sie einen Blick auf Mauerwerk/Isotope von Metafizzy. Sie wurden entworfen, das zu tun diese Art der Sache.

InformationsquelleAutor dc5

0

Benötigen Sie nicht die CSS-übergänge. Verwenden Sie einfach .hide() statt .fadeout()
```
<button onclick="$('#item1').hide(400);">
    Hide first
</button>
```
Siehe hier: https://jsfiddle.net/st1o8ngp/
- Während dies könnte für einige Fälle, die das Verhalten der Zugabe zurück die Elemente, die versteckt ist grundlegend anders
InformationsquelleAutor Adam

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.