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

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

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

8 72
css3 jquery animation

8 ответов:

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

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

пример - слайд и исчезают:

это скользит и анимирует непрозрачность-не на основе высоты контейнера, а на вершине/координате. пример

пример-авто-высота / нет Javascript: вот живой пример, не требующий высоты - работа с автоматической высотой и без javascript.
пример

32

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

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

15

поэтому я пошел вперед и ответил на свой собственный вопрос:)

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

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

вот он (работает только в браузерах WebKit): http://jsfiddle.net/XUjAH/6/

хотя и не чисто CSS, мое решение включает в себя переход высоты, которая определяется некоторыми JS.

9

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

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

вот код для скольжения слева направо

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

8

Я бы рекомендовал использовать jQuery Transit Plugin который использует свойство преобразования CSS3, которое отлично работает на мобильных устройствах из-за того, что большинство поддерживает аппаратное ускорение, чтобы дать этот родной внешний вид.

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

который может быть вызван следующим образом:

$("#триггер").нажмите(функция () {

    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

4

хорошо 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 получит обновление. Тогда у вас может быть кнопка запуска style="height: __" to установите его на ранее установленный 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

2

вы не можете легко сделать slideup slidedown с css3 tha, поэтому я превратил сценарий JensT в плагин с резервным и обратным вызовом javascript.

таким образом, если у вас есть современный brwowser вы можете использовать CSS3 csstransition. если Ваш браузер не поддерживает его gracefuly использовать старомодный 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/

0