CSS3 equivalente a jQuery slideUp e slideDown?


89

La mia applicazione non funziona bene con slideDown e slideUp di jQuery. Sto cercando di utilizzare un equivalente CSS3 nei browser che lo supportano.

È possibile, utilizzando le transizioni CSS3, cambiare un elemento da display: none;a display: block;mentre si fa scorrere l'elemento verso il basso o verso l'alto?


Penso che manterresti la visualizzazione: blocco, ma regola la larghezza dalla quantità desiderata a 0.
Dunhamzzz

Risposte:


37

Potresti fare qualcosa del genere:

#youritem .fade.in {
    animation-name: fadeIn;
}

#youritem .fade.out {
    animation-name: fadeOut;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(startYposition);
    } 
    100% {
        opacity: 1;
        transform: translateY(endYposition);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(startYposition);
    } 
    100% {
        opacity: 0;
        transform: translateY(endYposition);
    }
}

Esempio - Slide and Fade:

Questo fa scorrere e anima l'opacità, non in base all'altezza del contenitore, ma sulla coordinata superiore. Visualizza esempio

Esempio - Altezza automatica / No Javascript: ecco un esempio dal vivo, non necessita di altezza - si tratta di altezza automatica e nessun javascript.
Visualizza esempio


Puoi fare una demo su jsFiddle?
Šime Vidas

@ Šime Dal mio primo sguardo, direi semplicemente di dare al tuo elemento class = "fade" e aggiungere class in quando desideri una dissolvenza in entrata, in uscita quando desideri una dissolvenza in uscita.
lsuarez

@ Šime - Ho incluso due campioni da utilizzare
TNC

Vsync - guarda sotto e segui il thread prima di pubblicare commenti come questo
TNC

3
Ho modificato il secondo esempio (altezza automatica / senza JavaScript) in modo che fossero a posto solo gli stili barebone per ottenere l'effetto. jsfiddle.net/OlsonDev/nB5Du/251
Olson.dev

15

Ho cambiato la tua soluzione, in modo che funzioni in tutti i browser moderni:

snippet css:

-webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-ms-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;

js snippet:

    var clone = $('#this').clone()
                .css({'position':'absolute','visibility':'hidden','height':'auto'})
                .addClass('slideClone')
                .appendTo('body');

    var newHeight = $(".slideClone").height();
    $(".slideClone").remove();
    $('#this').css('height',newHeight + 'px');

ecco l'esempio completo http://jsfiddle.net/RHPQd/


Non sono sicuro di chi -2questo, dopo 7 anni, funzioni ancora come un incantesimo. Tranne che ho ricreato questo con Vanilla JS. +1 da me.
Hafiz Temuri

9

Quindi sono andato avanti e ho risposto alla mia domanda :)

La risposta di @ True riguardava la trasformazione di un elemento a un'altezza specifica. Il problema con questo è che non conosco l'altezza dell'elemento (può fluttuare).

Ho trovato altre soluzioni intorno alle quali utilizzavo l'altezza massima come transizione, ma questo ha prodotto un'animazione molto a scatti per me.

La mia soluzione di seguito funziona solo nei browser WebKit.

Sebbene non sia puramente CSS, implica la transizione dell'altezza, che è determinata da alcuni JS.

$('#click-me').click(function() {
  var height = $("#this").height();
  if (height > 0) {
    $('#this').css('height', '0');
  } else {
    $("#this").css({
      'position': 'absolute',
      'visibility': 'hidden',
      'height': 'auto'
    });
    var newHeight = $("#this").height();
    $("#this").css({
      'position': 'static',
      'visibility': 'visible',
      'height': '0'
    });
    $('#this').css('height', newHeight + 'px');
  }
});
#this {
  width: 500px;
  height: 0;
  max-height: 9999px;
  overflow: hidden;
  background: #BBBBBB;
  -webkit-transition: height 1s ease-in-out;
}

#click-me {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>

Visualizza su JSFiddle


Sì, il mio codice qui sotto non richiede altezza in quanto utilizza la coordinata y. Ma non hai detto che avevi bisogno di qualcosa con una dipendenza dall'altezza :) Potresti sempre fare una transizione di margine, ecc. Ma sembra che tu abbia quello che stai cercando, no?
TNC

@ Vero, pensi di poter spiegare cosa intendi per transizione di margine?
Mike

Aggiunto campione per il posizionamento, aggiungerà il margine
TNC

Aggiunto anche margin / no javsacript example
TNC

8

perché non sfruttare la transizione CSS dei browser moderni e rendere le cose più semplici e veloci utilizzando più CSS e meno jquery

Ecco il codice per scorrere su e giù

Ecco il codice per scorrere da sinistra a destra

Allo stesso modo possiamo cambiare lo scorrimento dall'alto verso il basso o da destra a sinistra cambiando transform-origin e transform: scaleX (0) o transform: scaleY (0) in modo appropriato.


1
So che questa risposta è stata inserita nel 2014, ma non posso consigliare di utilizzare questa risposta se si desidera spingere gli elementi al di sotto di essa verso il basso o verso l'alto poiché il contenitore padre aumenterà l'altezza nel browser
Ellisan

6

Far funzionare le transizioni di altezza può essere un po 'complicato principalmente perché devi conoscere l'altezza per cui animare. Ciò è ulteriormente complicato dall'imbottitura nell'elemento da animare.

Ecco cosa mi è venuto in mente:

usa uno stile come questo:

    .slideup, .slidedown {
        max-height: 0;            
        overflow-y: hidden;
        -webkit-transition: max-height 0.8s ease-in-out;
        -moz-transition: max-height 0.8s ease-in-out;
        -o-transition: max-height 0.8s ease-in-out;
        transition: max-height 0.8s ease-in-out;
    }
    .slidedown {            
        max-height: 60px ;  // fixed width                  
    }

Avvolgi il tuo contenuto in un altro contenitore in modo che il contenitore che stai facendo scorrere non abbia spaziatura interna / margini / bordi:

  <div id="Slider" class="slideup">
    <!-- content has to be wrapped so that the padding and
            margins don't effect the transition's height -->
    <div id="Actual">
            Hello World Text
        </div>
  </div>

Quindi utilizzare alcuni script (o markup dichiarativo nei framework di associazione) per attivare le classi CSS.

  $("#Trigger").click(function () {
    $("#Slider").toggleClass("slidedown slideup");
  });

Esempio qui: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

Funziona bene per contenuti di dimensioni fisse. Per una soluzione più generica è possibile utilizzare il codice per calcolare la dimensione dell'elemento quando la transizione è attivata. Il seguente è un plug-in jQuery che fa proprio questo:

$.fn.slideUpTransition = function() {
    return this.each(function() {
        var $el = $(this);
        $el.css("max-height", "0");
        $el.addClass("height-transition-hidden");
    });
};

$.fn.slideDownTransition = function() {
    return this.each(function() {
        var $el = $(this);
        $el.removeClass("height-transition-hidden");

        // temporarily make visible to get the size
        $el.css("max-height", "none");
        var height = $el.outerHeight();

        // reset to 0 then animate with small delay
        $el.css("max-height", "0");

        setTimeout(function() {
            $el.css({
                "max-height": height
            });
        }, 1);
    });
};

che può essere attivato in questo modo:

$ ("# Trigger"). Clic (function () {

    if ($("#SlideWrapper").hasClass("height-transition-hidden"))
        $("#SlideWrapper").slideDownTransition();
    else
        $("#SlideWrapper").slideUpTransition();
});

contro markup come questo:

<style>
#Actual {
    background: silver;
    color: White;
    padding: 20px;
}

.height-transition {
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
    overflow-y: hidden;            
}
.height-transition-hidden {            
    max-height: 0;            
}
</style>
<div id="SlideWrapper" class="height-transition height-transition-hidden">
    <!-- content has to be wrapped so that the padding and
        margins don't effect the transition's height -->
    <div id="Actual">
     Your actual content to slide down goes here.
    </div>
</div>

Esempio: http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview

L'ho scritto di recente in un post sul blog se sei interessato a maggiori dettagli:

http://weblog.west-wind.com/posts/2014/Feb/22/Using-CSS-Transitions-to-SlideUp-and-SlideDown


Questa è la soluzione più elegante per me. E se necessario, jQuery può essere facilmente rimosso. Si può alternare una classe in vanila JS come:document.getElementById("Slider").classList.toggle("slidedown");
ipers

5

Consiglierei di utilizzare il jQuery Transit Plugin che utilizza la proprietà di trasformazione CSS3, che funziona alla grande sui dispositivi mobili perché la maggior parte supporta l'accelerazione hardware per dare quell'aspetto nativo.

Esempio di violino JS

HTML:

<div class="moveMe">
    <button class="moveUp">Move Me Up</button>
    <button class="moveDown">Move Me Down</button>
    <button class="setUp">Set Me Up</button>
    <button class="setDown">Set Me Down</button>
 </div>

Javascript:

$(".moveUp").on("click", function() {
    $(".moveMe").transition({ y: '-=5' });
});

$(".moveDown").on("click", function() {
    $(".moveMe").transition({ y: '+=5' });
});

$(".setUp").on("click", function() {
    $(".moveMe").transition({ y: '0px' });
});

$(".setDown").on("click", function() {
    $(".moveMe").transition({ y: '200px' });
});

Questo ti consente di passare all'altezza naturale di un elemento usando l'auto? per esempio. $ (". moveMe"). Transition ({height: 'auto'})
monkeyboy

2
Vorrei che ignorassero i metodi slideUp()e slideDown()con questo plugin. Sarebbe davvero carino
steve

Questo è fantastico BTW. Grazie per aver aggiunto questa risposta!
steve

2

Aight fam, dopo un po 'di ricerca e sperimentazione, penso che l'approccio migliore sia quello di avere l'altezza della cosa a 0px, e lasciarla passare a un'altezza esatta. Ottieni l'altezza esatta con JavaScript. JavaScript non sta eseguendo l'animazione, sta solo cambiando il valore di altezza. Controllalo:

function setInfoHeight() {
  $(window).on('load resize', function() {
    $('.info').each(function () {
      var current = $(this);
      var closed = $(this).height() == 0;
      current.show().height('auto').attr('h', current.height() );
      current.height(closed ? '0' : current.height());
    });
  });

Ogni volta che la pagina viene caricata o ridimensionata, l'elemento con classe inforiceverà haggiornato il suo attributo. Quindi potresti fare in modo che un pulsante attivi il style="height: __"per impostarlo su quel hvalore precedentemente impostato .

function moreInformation() {
  $('.icon-container').click(function() {
    var info = $(this).closest('.dish-header').next('.info'); // Just the one info
    var icon = $(this).children('.info-btn'); // Select the logo

    // Stop any ongoing animation loops. Without this, you could click button 10
    // times real fast, and watch an animation of the info showing and closing
    // for a few seconds after
    icon.stop();
    info.stop();

    // Flip icon and hide/show info
    icon.toggleClass('flip');

    // Metnod 1, animation handled by JS
    // info.slideToggle('slow');

    // Method 2, animation handled by CSS, use with setInfoheight function
    info.toggleClass('active').height(icon.is('.flip') ? info.attr('h') : '0');

  });
};

Ecco lo stile per la infoclasse.

.info {
  display: inline-block;
  height: 0px;
  line-height: 1.5em;
  overflow: hidden;
  padding: 0 1em;
  transition: height 0.6s, padding 0.6s;
  &.active {
    border-bottom: $thin-line;
    padding: 1em;
  }
}

L'ho usato in uno dei miei progetti, quindi i nomi delle classi sono specifici. Puoi cambiarli come preferisci.

Lo stile potrebbe non essere supportato da tutti i browser. Funziona bene con le cromature.

Di seguito è riportato l'esempio dal vivo per questo codice. Basta fare clic ?sull'icona per avviare l'animazione

CodePen


1

Variante senza JavaScript. Solo CSS.

CSS:

.toggle_block {
    border: 1px solid #ccc;
    text-align: left;
    background: #fff;
    overflow: hidden;
}
.toggle_block .toggle_flag {
    display: block;
    width: 1px;
    height: 1px;
    position: absolute;
    z-index: 0;
    left: -1000px;
}
.toggle_block .toggle_key {
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
}
.toggle_block .content {
    padding: 0 10px;
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
}
.toggle_block .content .toggle_close {
    cursor: pointer;
    font-size: 12px;
}
.toggle_block .toggle_flag:checked ~ .toggle_key {
    background: #dfd;
}
.toggle_block .toggle_flag:checked ~ .content {
    max-height: 1000px;
    padding: 10px 10px;
}

HTML:

<div class="toggle_block">
    <input type="checkbox" id="toggle_1" class="toggle_flag">
    <label for="toggle_1" class="toggle_key">clicker</label>
    <div class="content">
        Text 1<br>
        Text 2<br>
        <label for="toggle_1" class="toggle_close">close</label>
    </div>
</div>

Per il blocco successivo cambia solo ID e attributi FOR in html.


0

non è possibile creare facilmente una slide up con css3, ecco perché ho trasformato lo script JensT in un plugin con fallback e callback javascript.

in questo modo se hai un brwowser moderno puoi usare css3 csstransition. se il tuo browser non lo supporta, usa graziosamente il vecchio slideUp slideDown.

 /* css */
.csstransitions .mosneslide {
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
  -ms-transition: height .4s ease-in-out;
  -o-transition: height .4s ease-in-out;
  transition: height .4s ease-in-out;
  max-height: 9999px;
  overflow: hidden;
  height: 0;
}

il plugin

(function ($) {
$.fn.mosne_slide = function (
    options) {
    // set default option values
    defaults = {
        delay: 750,
        before: function () {}, // before  callback
        after: function () {} // after callback;
    }
    // Extend default settings
    var settings = $.extend({},
        defaults, options);
    return this.each(function () {
        var $this = $(this);
        //on after
        settings.before.apply(
            $this);
        var height = $this.height();
        var width = $this.width();
        if (Modernizr.csstransitions) {
            // modern browsers
            if (height > 0) {
                $this.css(
                    'height',
                    '0')
                    .addClass(
                        "mosne_hidden"
                );
            } else {
                var clone =
                    $this.clone()
                    .css({
                        'position': 'absolute',
                        'visibility': 'hidden',
                        'height': 'auto',
                        'width': width
                    })
                    .addClass(
                        'mosne_slideClone'
                )
                    .appendTo(
                        'body'
                );
                var newHeight =
                    $(
                        ".mosne_slideClone"
                )
                    .height();
                $(
                    ".mosne_slideClone"
                )
                    .remove();
                $this.css(
                    'height',
                    newHeight +
                    'px')
                    .removeClass(
                        "mosne_hidden"
                );
            }
        } else {
            //fallback
            if ($this.is(
                ":visible"
            )) {
                $this.slideUp()
                    .addClass(
                        "mosne_hidden"
                );
            } else {
                $this.hide()
                    .slideDown()
                    .removeClass(
                        "mosne_hidden"
                );
            }
        }
        //on after
        setTimeout(function () {
            settings.after
                .apply(
                    $this
            );
        }, settings.delay);
    });
}
})(jQuery);;

come usarlo

/* jQuery */
$(".mosneslide").mosne_slide({
    delay:400,
    before:function(){console.log("start");},
    after:function(){console.log("done");}
});

puoi trovare una pagina demo qui http://www.mosne.it/playground/mosne_slide_up_down/


Questa non è una risposta, una risposta contiene più di un semplice collegamento.
Max

Questo non fornisce una risposta alla domanda. Per criticare o richiedere chiarimenti a un autore, lascia un commento sotto il suo post: puoi sempre commentare i tuoi post e una volta che hai una reputazione sufficiente potrai commentare qualsiasi post .
4

Sebbene questo collegamento possa rispondere alla domanda, è meglio includere le parti essenziali della risposta qui e fornire il collegamento come riferimento. Le risposte di solo collegamento possono diventare non valide se la pagina collegata cambia.
sashkello

0
    try this for slide up slide down with animation 
give your **height

        @keyframes slide_up{
            from{
                min-height: 0;
                height: 0px;
                opacity: 0;
            }
            to{
                height: 560px;
                opacity: 1;
            }
        }

        @keyframes slide_down{
            from{
                height: 560px;
                opacity: 1;
            }
            to{
                min-height: 0;
                height: 0px;
                opacity: 0;
            } 
        }
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.