CSS3 odpowiednik jQuery slideUp i slideDown?

Question 1

Moja aplikacja działa słabo z slideDown i slideUp jQuery. Chcę użyć odpowiednika CSS3 w przeglądarkach, które go obsługują.

Czy za pomocą przejść CSS3 można zmienić element z display: none;na display: block;podczas przesuwania elementu w dół lub w górę?

Question 2

Możesz zrobić coś takiego:

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

Przykład - Slide and Fade:

To przesuwa i animuje krycie - nie na podstawie wysokości kontenera, ale na górze / współrzędnych. Zobacz przykład

Przykład - Auto-height / No Javascript: Oto próbka na żywo, niewymagająca wysokości - zajmująca się automatyczną wysokością i bez javascript.
Zobacz przykład

Question 3

Zmieniłem Twoje rozwiązanie tak, aby działało we wszystkich nowoczesnych przeglądarkach:

css fragment:

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

tutaj jest pełny przykład http://jsfiddle.net/RHPQd/

Question 4

Więc poszedłem dalej i odpowiedziałem na własne pytanie :)

Odpowiedź @ True dotyczyła przekształcenia elementu na określoną wysokość. Problem z tym polega na tym, że nie znam wysokości elementu (może się zmieniać).

Znalazłem inne rozwiązania, w których jako przejście zastosowano max-height, ale to spowodowało dla mnie bardzo szarpaną animację.

Poniższe rozwiązanie działa tylko w przeglądarkach WebKit.

Chociaż nie jest to tylko CSS, wymaga przejścia na wysokość, która jest określana przez niektóre 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>

Rozwiń fragment

Zobacz na JSFiddle

Question 5

dlaczego nie skorzystać z przejścia na CSS w nowoczesnych przeglądarkach i uprościć i przyspieszyć, używając więcej css i mniej jQuery

Oto kod do przesuwania w górę iw dół

Oto kod do przesuwania od lewej do prawej

Podobnie możemy zmienić przesuwanie od góry do dołu lub od prawej do lewej, odpowiednio zmieniając pochodzenie transformacji i transform: scaleX (0) lub transform: scaleY (0).

Question 6

Uruchomienie zmian wysokości może być nieco trudne, głównie dlatego, że musisz znać wysokość do animacji. Jest to dodatkowo komplikowane przez dopełnienie animowanego elementu.

Oto co wymyśliłem:

użyj stylu takiego:

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

Umieść zawartość w innym kontenerze, tak aby przesuwany kontener nie miał dopełnienia / marginesów / obramowań:

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

Następnie użyj skryptu (lub deklaratywnego znacznika w strukturach powiązań), aby wyzwolić klasy CSS.

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

Przykład tutaj: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

Działa to dobrze w przypadku treści o stałym rozmiarze. Aby uzyskać bardziej ogólne rozwiązanie, możesz użyć kodu, aby obliczyć rozmiar elementu, gdy przejście jest aktywowane. Poniżej znajduje się wtyczka jQuery, która właśnie to robi:

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

które można uruchomić w ten sposób:

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

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

przed takimi znacznikami:

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

Przykład: http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview

Napisałem to niedawno w poście na blogu, jeśli jesteś zainteresowany bardziej szczegółami:

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

Question 7

Polecam użycie wtyczki jQuery Transit Plugin, która wykorzystuje właściwość transform CSS3, która działa świetnie na urządzeniach mobilnych, ponieważ większość obsługuje akcelerację sprzętową, aby nadać natywny wygląd i styl.

Przykład JS Fiddle

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

Question 8

Dobra rodzina, po pewnych badaniach i eksperymentach myślę, że najlepszym podejściem jest ustawienie wysokości na wysokości 0pxi pozwolenie jej przejść na dokładną wysokość. Dokładną wysokość uzyskasz za pomocą JavaScript. JavaScript nie wykonuje animacji, po prostu zmienia wartość wysokości. Sprawdź to:

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

Za każdym razem, gdy strona ładuje się lub zmienia rozmiar, element z klasą infootrzyma hzaktualizowany atrybut. Wtedy możesz mieć przycisk wyzwalający, style="height: __"aby ustawić wcześniej ustawioną hwartość.

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

  });
};

Oto stylizacja infoklasy.

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

Użyłem tego w jednym z moich projektów, więc nazwy klas są specyficzne. Możesz je dowolnie zmieniać.

Styl może nie być obsługiwany w różnych przeglądarkach. Działa dobrze w chromie.

Poniżej znajduje się przykład na żywo dla tego kodu. Wystarczy kliknąć ?ikonę, aby rozpocząć animację

CodePen

Question 9

Wariant bez JavaScript. Tylko 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>

Dla następnego bloku zmień tylko atrybuty ID i FOR w html.

Question 10

nie można łatwo zrobić slidedown slidedown za pomocą css3, dlatego zmieniłem skrypt JensT we wtyczkę z powrotem javascript i callback.

w ten sposób, jeśli masz nowoczesną przeglądarkę, możesz użyć css3 csstransition. jeśli Twoja przeglądarka nie obsługuje go wdzięcznie, użyj staroświeckiego 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;
}

wtyczka

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

Jak tego użyć

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

możesz znaleźć stronę demonstracyjną tutaj http://www.mosne.it/playground/mosne_slide_up_down/

Question 11

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