CSS3相当于jQuery slideUp和slideDown？
我的应用程序使用jQuery的slideDown和slideUpperformance不佳。 我正在寻求在支持它的浏览器中使用CSS3等价物。
是否有可能，使用CSS3转换，从display: none;更改元素display: none; display: block; 当滑动项目下来或上升？
你可以做这样的事情：
#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); } }
示例 – 幻灯片和淡入淡出：
这个幻灯片和animation的不透明度 – 不是基于容器的高度，而是在顶部/坐标。 查看示例
示例 – 自动高度/无Javascript：这是一个生动的示例，不需要高度 – 处理自动高度和没有JavaScript。
查看示例
我改变了你的解决scheme，以便它适用于所有现代浏览器：
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/
所以我已经提前回答了我自己的问题:)
@ True的答案是将元素转换为特定的高度。 这个问题是我不知道元素的高度（它可以波动）。
我发现其他解决scheme，使用最大高度作为过渡，但这为我产生了一个非常生涩的animation。
在这里（仅在WebKit浏览器中有效）： http : //jsfiddle.net/XUjAH/6/
虽然不是纯粹的CSS，但我的解决scheme涉及高度，这是由一些JS决定的。
为什么不利用现代浏览器的CSS过渡，使事情更简单，快速使用更多的CSS和更less的jQuery
这里是上下滑动的代码
这里是从左到右滑动的代码
类似地，我们可以通过适当地改变transform-origin和transform：scaleX（0）或transform：scaleY（0）来改变从上到下或从右到左的滑动。
我build议使用使用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' }); });
获得身高转换的工作可能有点棘手，主要是因为你必须知道高度来animation。 填充要animation的元素会使这一点变得更加复杂。
这是我想出来的：
使用这样的风格：
.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
这适用于固定大小的内容。 对于更通用的解决scheme，您可以使用代码来确定转换激活时元素的大小。 以下是一个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
Aight fam在经过一番研究和实验之后，我认为最好的办法就是让这个东西的高度在0px ，让它过渡到一个确切的高度。 你用JavaScript获得了确切的高度。 JavaScript不做animation，只是改变高度值。 核实：
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()); }); });
每当页面加载或resize时，具有类info的元素将获得其h属性更新。 然后你可以有一个button触发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; } }
我在我的一个项目中使用了这个，所以类名是特定的。 不pipe你喜欢，你都可以改变它们。
跨浏览器可能不支持样式。 在铬中工作正常。
以下是此代码的实例。 只需点击? 图标开始animation
CodePen
你不能easisly滑动滑动与css3 tha为什么我已经把JensT脚本变成一个插件与JavaScript的回退和callback。
用这种方法，如果你有一个现代化的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");} });
你可以在这里find一个演示页面http://www.mosne.it/playground/mosne_slide_up_down/
