CSS3相当于jQuery slideUp和slideDown？

Question

我的应用程序使用jQuery的slideDown和slideUp表现不佳.我希望在支持它的浏览器中使用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);
    }
}

示例 - 滑动和淡入淡出:

这会滑动并激活不透明度 - 不是基于容器的高度,而是基于顶部/坐标. 查看示例

示例 - 自动高度/无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的回答是将元素转换为特定高度.这个问题是我不知道元素的高度(它可能会波动).

我找到了其他使用max-height作为过渡的解决方案,但这给我带来了一个非常生涩的动画.

它是(仅适用于WebKit浏览器):http://jsfiddle.net/XUjAH/6/

虽然不是纯粹的CSS,但我的解决方案涉及转换高度,这由一些JS决定.

Answer 4

为什么不利用现代浏览器css过渡,使用更多的CSS和更少的jquery使事情变得更简单和快速

这是上下滑动的代码

这是从左到右滑动的代码

类似地,我们可以通过改变transform-origin和transform:scaleX(0)或transform:scaleY(0)来适当地改变从上到下或从右到左的滑动.

Answer 5

我建议使用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' });
});

Answer 6

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.

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

Example here: 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:

$.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（）{

    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