CSS3 相当于 jQuery slideUp 和 slideDown？

CSS3 equivalent to jQuery slideUp and slideDown?

提问by Mike

My application is performing poorly with jQuery's slideDown and slideUp. I'm looking to use a CSS3 equivalent in browsers which support it.

我的应用程序在使用 jQuery 的 slideDown 和 slideUp 时表现不佳。我希望在支持它的浏览器中使用等效的 CSS3。

Is it possible, using CSS3 transitions, to change an element from display: none;to display: block;while sliding the item down or up?

是否有可能，使用CSS3过渡，一个元素从改变display: none;到display: block;，而滑动的项目向上或向下？

采纳答案by TNC

You could do something like this:

你可以这样做：

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

Example - Slide and Fade:

示例 - 滑动和淡入淡出：

This slides and animates the opacity - not based on height of the container, but on the top/coordinate. View example

这会滑动并动画不透明度 - 不是基于容器的高度，而是基于顶部/坐标。 查看示例

Example - Auto-height/No Javascript:Here is a live sample, not needing height - dealing with automatic height and no javascript.
View example

示例 - 自动高度/无 Javascript：这是一个实时示例，不需要高度 - 处理自动高度且没有 javascript。
查看示例

回答by JensT

I changed your solution, so that it works in all modern browsers:

我更改了您的解决方案，使其适用于所有现代浏览器：

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

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

here's the full example http://jsfiddle.net/RHPQd/

这是完整的示例http://jsfiddle.net/RHPQd/

回答by Mike

So I've gone ahead and answered my own question :)

所以我继续回答我自己的问题:)

@True's answer regarded transforming an element to a specific height. The problem with this is I don't know the height of the element (it can fluctuate).

@True 的回答认为将元素转换为特定高度。问题是我不知道元素的高度（它可能会波动）。

I found other solutions around which used max-height as the transition but this produced a very jerky animation for me.

我找到了其他使用 max-height 作为过渡的解决方案，但这对我来说产生了一个非常生涩的动画。

My solution below works only in WebKit browsers.

我下面的解决方案仅适用于 WebKit 浏览器。

Although not purely CSS, it involves transitioning the height, which is determined by some JS.

虽然不是纯粹的 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>

View on JSFiddle

在 JSFiddle 上查看

回答by manas

why not to take advantage of modern browsers css transition and make things simpler and fast using more css and less jquery

为什么不利用现代浏览器的 css 转换并使用更多的 css 和更少的 jquery 使事情变得更简单和快速

Here is the code for sliding up and down

这是上下滑动的代码

Here is the code for sliding left to right

这是从左向右滑动的代码

Similarly we can change the sliding from top to bottom or right to left by changing transform-origin and transform: scaleX(0) or transform: scaleY(0) appropriately.

同样，我们可以通过适当地更改 transform-origin 和 transform: scaleX(0) 或 transform: scaleY(0) 来更改从上到下或从右到左的滑动。

回答by Rick Strahl

Getting height transitions to work can be a bit tricky mainly because you have to know the height to animate for. This is further complicated by padding in the element to be animated.

使高度过渡起作用可能有点棘手，主要是因为您必须知道要为其设置动画的高度。通过填充要动画的元素，这进一步复杂化。

Here is what I came up with:

这是我想出的：

use a style like this:

使用这样的风格：

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

Wrap your content into another container so that the container you're sliding has no padding/margins/borders:

将您的内容包装到另一个容器中，以便您滑动的容器没有填充/边距/边框：

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

Then use some script (or declarative markup in binding frameworks) to trigger the CSS classes.

然后使用一些脚本（或绑定框架中的声明性标记）来触发 CSS 类。

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

Example here: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

这里的例子：http: //plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

This works fine for fixed size content. For a more generic soltution you can use code to figure out the size of the element when the transition is activated. The following is a jQuery plug-in that does just that:

这适用于固定大小的内容。对于更通用的解决方案，您可以使用代码来计算激活过渡时元素的大小。下面是一个 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);
    });
};

which can be triggered like this:

可以这样触发：

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

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

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

against markup like this:

反对这样的标记：

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

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

示例：http: //plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview

I wrote this up recently in a blog post if you're interested in more detail:

如果你对更多细节感兴趣，我最近在一篇博客文章中写了这个：

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

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

回答by ROFLwTIME

I would recommend using the jQuery Transit Pluginwhich uses the CSS3 transform property, which works great on mobile devices due to the fact that most support hardware acceleration to give that native look and feel.

我建议使用使用 CSS3 转换属性的jQuery Transit 插件，它在移动设备上运行良好，因为大多数支持硬件加速以提供原生外观和感觉。

JS Fiddle Example

JS小提琴示例

HTML:

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:

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

回答by Cruz Nunez

Aight fam, after some research and experimenting, I think the best approach is to have the thing's height at 0px, and let it transition to an exact height. You get the exact height with JavaScript. The JavaScript isn't doing the animating, it's just changing the height value. Check it:

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

Whenever the page loads or is resized, the element with class infowill get its hattribute updated. Then you could have a button trigger the style="height: __"to set it to that previously set hvalue.

每当页面加载或调整大小时，具有类的元素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');

  });
};

Here's the styling for the infoclass.

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

I used this on one of my projects so class names are specific. You can change them up however you like.

我在我的一个项目中使用了它，因此类名是特定的。您可以随意更改它们。

The styling might not be supported cross-browser. Works fine in chrome.

样式可能不支持跨浏览器。在 chrome 中工作正常。

Below is the live example for this code. Just click on the ?icon to start the animation

下面是此代码的实时示例。只需单击?图标即可开始动画

CodePen

代码笔

回答by uma mahesh

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

回答by mosne

you can't make easisly a slideup slidedown with css3 tha's why I've turned JensT script into a plugin with javascript fallback and callback.

你不能很容易地用 css3 制作一个幻灯片，这就是为什么我把 JensT 脚本变成了一个带有 javascript 回退和回调的插件。

in this way if you have a modern brwowser you can use the css3 csstransition. if your browser does not support it gracefuly use the old fashioned slideUp slideDown.

这样，如果您有现代浏览器，则可以使用 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;
}

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

how to use it

如何使用它

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

you can find a demo page here http://www.mosne.it/playground/mosne_slide_up_down/

你可以在这里找到一个演示页面 http://www.mosne.it/playground/mosne_slide_up_down/