CSS3 эквивалентно jQuery slideUp и slideDown?

Question

Мое приложение работает плохо с функциями slideDown и slideUp в jQuery. Я ищу использовать CSS3-эквивалент в браузерах, которые его поддерживают.

Возможно ли с помощью переходов CSS3 изменить элемент с display: none; на display: block; при перемещении элемента вниз или вверх?

Answer 1

Вы можете сделать что-то вроде этого:

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

Это слайд и анимация непрозрачности - не зависит от высотыконтейнер, но сверху / координата. Просмотреть пример

Пример - Auto-height / No Javascript: Вот живой пример, не требующий высоты - имеет дело с автоматической высотой и без JavaScript.
Посмотреть пример

Answer 2

Я изменил ваше решение, чтобы оно работало во всех современных браузерах:

Фрагмент 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/

Answer 3

Итак, я пошел дальше и ответил на свой вопрос:)

@ Ответ True касался преобразования элемента в конкретную высоту. Проблема в том, что я не знаю высоту элемента (он может колебаться).

Я нашел другие решения, в которых в качестве перехода использовалась максимальная высота, но это дало мне очень резкую анимацию.

Мое решение ниже работает только в браузерах 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

Answer 4

почему бы не воспользоваться преимуществами современных браузеров css transition и сделать вещи проще и быстрее, используя больше css и меньше jquery

Вот код для скольжения вверх и вниз

Вот код для перемещения слева направо

Аналогичным образом мы можем изменить скольжение сверху вниз или справа налево, изменив источник преобразования и преобразование: scaleX (0) или преобразование: scaleY (0) соответственно.

Answer 5

Я бы порекомендовал использовать jQuery Transit Plugin , который использует свойство преобразования 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' });
});

Answer 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"). Click (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 / сообщений / 2014 / Февраль / 22 / Использование-CSS-переходы к SlideUp-и-SlideDown

Answer 7

Достаточно хорошо, после некоторых исследований и экспериментов, я думаю, что лучший подход состоит в том, чтобы иметь высоту вещи в 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;
  }
}

Я использовал это в одном из моих проектов, чтобы имена классов были конкретными.Вы можете изменить их по своему усмотрению.

Стили могут не поддерживаться кросс-браузерными.Прекрасно работает в Chrome.

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

CodePen

Answer 8

Вы не можете легко сделать слайд-слайд с помощью 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/