CSS3 еквівалентний jQuery slideUp і slideDown?

Question 1

Моя програма погано працює з jQuery's slideDown і slideUp. Я прагну використовувати еквівалент CSS3 у браузерах, які його підтримують.

Чи можливо, використовуючи переходи CSS3, змінити елемент з display: none;на, display: block;одночасно пересуваючи елемент вниз або вгору?

Question 2

Ви можете зробити щось подібне:

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

Приклад - Slide and Fade:

Це ковзає та анімує непрозорість - не на основі висоти контейнера, а на вершині / координаті. Переглянути приклад

Приклад - Автовисота / відсутність Javascript: Ось реальний зразок, який не потребує висоти - має справу з автоматичною висотою та відсутністю JavaScript.
Переглянути приклад

Question 3

Я змінив ваше рішення, щоб воно працювало у всіх сучасних браузерах:

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-фрагмент:

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

ось повний приклад http://jsfiddle.net/RHPQd/

Question 4

Отже, я відповів на власне запитання :)

Відповідь @ True стосувалася перетворення елемента на певну висоту. Проблема в тому, що я не знаю висоту елемента (він може коливатися).

Я знайшов інші рішення, навколо яких використовувався max-height як перехід, але це створило для мене дуже відхилену анімацію.

Моє рішення нижче працює лише у веб-переглядачах WebKit.

Хоча це не суто CSS, він передбачає перехід висоти, що визначається деякими 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>

Розгорніть фрагмент

Переглянути на JSFiddle

Question 5

чому б не скористатися перевагами сучасних браузерів css переходу та зробити речі простішими та швидшими, використовуючи більше css та менше jquery

Ось код для ковзання вгору і вниз

Ось код для ковзання зліва направо

Подібним чином ми можемо змінити ковзання зверху вниз або праворуч ліворуч, змінивши відповідним чином transform-origin і transform: scaleX (0) або transform: scaleY (0).

Question 6

Отримати переходи висоти на роботу може бути трохи складно, головним чином тому, що ви повинні знати висоту, щоб анімувати. Це ще більше ускладнюється заповненням в анімованому елементі.

Ось що я придумав:

використовуйте такий стиль:

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

Оберніть вміст в інший контейнер, щоб контейнер, який ви пересуваєте, не мав відступів / полів / меж:

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

Потім використовуйте якийсь сценарій (або декларативну розмітку у фреймворках прив'язки) для запуску класів CSS.

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

Приклад тут: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

Це чудово працює для вмісту фіксованого розміру. Для більш загального розв’язання можна використовувати код, щоб з’ясувати розмір елемента при активації переходу. Далі наведено плагін jQuery, який робить саме це:

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

який може бути запущений так:

$ ("# Trigger"). Натисніть (function () {

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

проти розмітки, як це:

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

Приклад: http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview

Я писав це нещодавно у дописі в блозі, якщо вас цікавить детальніше:

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

Question 7

Я б рекомендував використовувати плагін jQuery Transit, який використовує властивість перетворення CSS3, яке чудово працює на мобільних пристроях завдяки тому, що більшість підтримує апаратне прискорення, щоб надати цьому стилю природний вигляд.

Приклад 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

Aight fam, після деяких досліджень та експериментів, я вважаю, що найкращим підходом є встановити висоту речі 0pxі дозволити їй перейти на точну висоту. Ви отримуєте точну висоту за допомогою JavaScript. JavaScript не виконує анімацію, це просто зміна значення висоти. Перевір це:

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

Кожного разу, коли сторінка завантажується або змінюється розмір, елемент з класом оновлює infoсвій hатрибут. Тоді у вас може бути кнопка, що запускає, style="height: __"щоб встановити її на попередньо встановлене hзначення.

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

  });
};

Ось стиль для infoкласу.

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

Я використовував це в одному зі своїх проектів, тому назви класів конкретні. Ви можете змінити їх як завгодно.

Можливо, стиль не підтримується між браузерами. Чудово працює в хромі.

Нижче наведено приклад цього коду. Просто натисніть на ?піктограму, щоб розпочати анімацію

CodePen

Question 9

Варіант без JavaScript. Тільки 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>

Для наступного блоку змінюйте лише атрибути ID та FOR у html.

Question 10

Ви не можете легко зробити слайд-слайд-слайд із css3, тому я перетворив скрипт JensT на плагін із резервними та зворотними викликами javascript.

таким чином, якщо у вас є сучасний brwowser, ви можете використовувати css3 csstransition. якщо ваш браузер не підтримує його, витончено використовуйте старомодний 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;
}

плагін

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

як ним користуватися

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

Ви можете знайти демонстраційну сторінку тут 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;
            } 
        }