CSS3相当于jQuery slideUp和slideDown吗？

88

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

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

jquery  css  animation 
— 麦克风
source
我认为您可以保留display：block，但只需将宽度从所需的量调整为
— 0。– Dunhamzzz 2011年

Answers:

37

您可以执行以下操作：

#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。
查看范例

— 跨国公司
source
您可以在jsFiddle上进行演示吗？
— 森那维达斯
@Šime从我的第一眼看，我想说的是，给您的元素class =“ fade”并在需要淡入时添加类，在想要淡入时添加类。
— lsuarez 2011年
@Šime-我提供了两个示例供您使用
— TNC
Vsync-在发布这样的评论之前，先看下面的内容并关注该线程
— TNC
3
我修改了第二个示例（自动高度/不使用JavaScript），因此只有用于获得效果的准系统样式就位。jsfiddle.net/OlsonDev/nB5Du/251
— Olson.dev
14

我更改了您的解决方案，使其可以在所有现代浏览器中使用：

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/

— 詹斯
source
9

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

@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上查看

— 麦克风
source
是的，下面的代码不需要高度，因为它使用y坐标。但是您没有提到您需要一些与高度相关的东西：)您总是可以进行边距转换，等等。但是看来您有想要的东西，不是吗？
— TNC
@True您认为可以解释保证金过渡的含义吗？
— 麦克，
添加了定位示例，将增加边距
— TNC
还添加余量/无javsacript例如
— TNC
8

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

这是上下滑动的代码

这是从左向右滑动的代码

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

— 法力值
source
1
我知道此答案放置在2014年，但是如果您想向下或向上推送其下方的元素，则我不建议使用此答案，因为父容器会提高浏览器的高度
— Ellisan
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/posts/2014/Feb/22/Using-CSS-Transitions-to-SlideUp-and-SlideDown

— 里克·斯特拉尔
source
对我来说，这是最优雅的解决方案。而且，如果需要，可以轻松删除jQuery。可以在document.getElementById("Slider").classList.toggle("slidedown");
— vanila
5

我建议使用使用CSS3转换属性的jQuery Transit插件，该插件在移动设备上的效果很好，这是由于大多数支持硬件加速以提供本机外观的事实。

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' });
});
— ROFLwTIME
source
这是否使您能够使用auto过渡到元素的自然高度？例如。$（“。moveMe”）。transition（{height：'auto'}）
— Monkeyboy
2
我希望他们使用此插件重写slideUp()和slideDown()方法。那真是太好了
— 史蒂夫（Steve）2014年
真棒BTW。感谢您添加此答案！
— 史蒂夫2014年
2

直言不讳，经过一些研究和实验，我认为最好的方法是将事物的高度保持在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());
    });
  });

每当页面加载或调整页面大小时，具有class的元素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中效果很好。

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

密码笔

— 克鲁兹·努涅斯
source
1

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

对于下一个块，仅在HTML中更改ID和FOR属性。

— 森
source
0

您无法通过css3轻松地将幻灯片放倒，这就是为什么我将JensT脚本转换为带有JavaScript后备和回调的插件的原因。

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

— 莫斯内
source
这不是答案，答案不仅仅包含链接。
— 2013年
这不能为问题提供答案。要批评或要求作者澄清，请在其帖子下方留下评论-您可以随时对自己的帖子发表评论，一旦拥有足够的声誉，您就可以在任何帖子中发表评论。
— 2013年
尽管此链接可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会无效。
— sashkello 2013年
0 
    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;
            } 
        }
— 乌玛马什
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.