我正在尝试使用CSS转换制作一个<ul>幻灯片。

<ul>开始于高度:0;。悬停时,高度设置为height:auto;。然而,这导致它简单地出现,

如果我从高度做:40px;至高度:自动;,那么它将向上滑动到高度:0;,然后突然跳到正确的高度。

如果不使用JavaScript,我怎么能做到这一点?

#子0{高度:0;溢出:隐藏;背景色:#dedede;-moz过渡:高度1s容易;-webkit过渡:高度1s轻松;-o过渡:高度1s容易;过渡:高度1s;}#parent0:悬停#child0{高度:自动;}#孩子40{高度:40px;溢出:隐藏;背景色:#dedede;-moz过渡:高度1s容易;-webkit过渡:高度1s轻松;-o过渡:高度1s容易;过渡:高度1s;}#parent40:悬停#child40{高度:自动;}h1小时{字号:粗体;}两个CSS片段之间的唯一区别是一个高度为0,另一个高度是40。<小时><div id=“parent0”><h1>将我悬停(高度:0)</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><小时><div id=“parent40”><h1>将我悬停(高度:40)</h1><div id=“child40”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>


当前回答

我的解决方法是将最大高度转换为精确的内容高度,以获得流畅的动画效果,然后使用transitionEnd回调将最大高度设置为9999px,以便内容可以自由调整大小。

var content=$('#content');content.inner=$('#content.inter');//关闭时需要获取内容大小的内部div//css转换回调content.on('transitionEnd-webkitTransitionEnd transitiononend oTransitionEnd-msTransitionEnd',函数(e){if(content.hasClass('open')){content.css('max-height',9999);//尝试将此设置为“无”。。。我敢你!}});$('#toggle').on('click',函数(e){content.tggleClass(“打开关闭”);content.contentHeight=content.outerHeight();if(content.hasClass('closed')){//禁用转换&将最大高度设置为内容高度content.removeClass('transitions').css('max-height',content.contentHeight);setTimeout(函数){//启用和启动转换content.addClass('转换').css({'最大高度':0,“不透明度”:0});}, 10); // 10ms超时是禁用/启用转换的秘密因素//chrome只需要1ms,但FF需要约10ms,否则会在第一部动画中因某种原因而窒息}否则如果(content.hasClass('open')){content.contentHeight+=content.inter.outerHeight();//如果已关闭,请将内部高度添加到内容高度内容.css({'max height':content.contentHeight,“不透明度”:1});}});.转换{过渡:所有0.5秒都是缓进缓出;-webkit转换:所有0.5s都易于输入输出;-moz转换:所有0.5s都易于输入输出;}正文{字体系列:Arial;线高:3ex;}代码{显示:内联块;背景:#fafafa;填充:0 1ex;}#切换{显示:块;填充:10px;边距:10px自动;文本对齐:居中;宽度:30ex;}#内容{溢出:隐藏;边距:10px;边框:1px实心#666;背景:#efefef;不透明度:1;}#内容。内部{填充:10px;溢出:自动;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><div id=“content”class=“open”><div class=“inner”><h3>在<code>height:0</code>和<code>high:auto</code>之间平滑CSS转换</h3><p>一个巧妙的解决方法是使用<code>max-height</code>而不是<code>height</code>,并将其设置为比内容更大的值。问题是浏览器使用此值来计算过渡持续时间。因此,如果您将其设置为<code>max-height:1000px</code>,但内容只有100px高,则动画将快10倍</p><p>另一种选择是使用JS测量内容高度,并转换到固定值,但如果内容发生变化,则必须跟踪内容并手动调整其大小</p><p>此解决方案是两种转换的混合,即转换到测量的内容高度,然后在转换后将其设置为<code>最大高度:9999px</code>,以调整流体内容大小</p></div></div><br/><button id=“toggle”>接受挑战</按钮>

其他回答

当其中一个高度为自动时,当前无法在高度上设置动画,必须设置两个显式高度。

没有最大高度,使用相对定位,在li元素上工作,并且是纯CSS:

除了Firefox,我没有在其他任何地方进行过测试,尽管从CSS来看,它应该可以在所有浏览器上运行。

小提琴:http://jsfiddle.net/n5XfG/2596/

CSS

.wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

HTML

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

我只是为<li>元素设置动画,而不是为整个容器设置动画:

<style>
.menu {
    border: solid;
}
.menu ul li {
    height: 0px;
    transition: height 0.3s;
    overflow: hidden;
}
button:hover ~ .wrapper .menu ul li,
button:focus ~ .wrapper .menu ul li,
.menu:hover ul li {
    height: 20px;
}
</style>


<button>Button</button>
<div class="wrapper">
    <div class="menu">
        <ul>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
        </ul>
    </div>
</div>

您可以添加ul:margin 0;高度为0。

我的解决方法是将最大高度转换为精确的内容高度,以获得流畅的动画效果,然后使用transitionEnd回调将最大高度设置为9999px,以便内容可以自由调整大小。

var content=$('#content');content.inner=$('#content.inter');//关闭时需要获取内容大小的内部div//css转换回调content.on('transitionEnd-webkitTransitionEnd transitiononend oTransitionEnd-msTransitionEnd',函数(e){if(content.hasClass('open')){content.css('max-height',9999);//尝试将此设置为“无”。。。我敢你!}});$('#toggle').on('click',函数(e){content.tggleClass(“打开关闭”);content.contentHeight=content.outerHeight();if(content.hasClass('closed')){//禁用转换&将最大高度设置为内容高度content.removeClass('transitions').css('max-height',content.contentHeight);setTimeout(函数){//启用和启动转换content.addClass('转换').css({'最大高度':0,“不透明度”:0});}, 10); // 10ms超时是禁用/启用转换的秘密因素//chrome只需要1ms,但FF需要约10ms,否则会在第一部动画中因某种原因而窒息}否则如果(content.hasClass('open')){content.contentHeight+=content.inter.outerHeight();//如果已关闭,请将内部高度添加到内容高度内容.css({'max height':content.contentHeight,“不透明度”:1});}});.转换{过渡:所有0.5秒都是缓进缓出;-webkit转换:所有0.5s都易于输入输出;-moz转换:所有0.5s都易于输入输出;}正文{字体系列:Arial;线高:3ex;}代码{显示:内联块;背景:#fafafa;填充:0 1ex;}#切换{显示:块;填充:10px;边距:10px自动;文本对齐:居中;宽度:30ex;}#内容{溢出:隐藏;边距:10px;边框:1px实心#666;背景:#efefef;不透明度:1;}#内容。内部{填充:10px;溢出:自动;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><div id=“content”class=“open”><div class=“inner”><h3>在<code>height:0</code>和<code>high:auto</code>之间平滑CSS转换</h3><p>一个巧妙的解决方法是使用<code>max-height</code>而不是<code>height</code>,并将其设置为比内容更大的值。问题是浏览器使用此值来计算过渡持续时间。因此,如果您将其设置为<code>max-height:1000px</code>,但内容只有100px高,则动画将快10倍</p><p>另一种选择是使用JS测量内容高度,并转换到固定值,但如果内容发生变化,则必须跟踪内容并手动调整其大小</p><p>此解决方案是两种转换的混合,即转换到测量的内容高度,然后在转换后将其设置为<code>最大高度:9999px</code>,以调整流体内容大小</p></div></div><br/><button id=“toggle”>接受挑战</按钮>

要从任何起始高度(包括0)过渡到自动(全尺寸和灵活),而不需要基于每个节点的硬设置代码或任何用户代码来初始化:https://github.com/csuwildcat/transition-auto.

您想要的:http://codepen.io/csuwldcat/pen/kwsdF

将以下JS文件插入页面,然后从要展开和收缩的节点中添加/删除一个布尔属性--reveal=“”。

作为用户,一旦包含示例代码下面的代码块:

/*** Nothing out of the ordinary in your styles ***/

<style>
    div {
        height: 0;
        overflow: hidden;
        transition: height 1s;
    }
</style>

/*** Just add and remove one attribute and transition to/from auto! ***/

<div>
    I have tons of content and I am 0px in height you can't see me...
</div>

<div reveal>
     I have tons of content and I am 0px in height you can't see me...
     but now that you added the 'reveal' attribute, 
     I magically transitioned to full height!...
</div>

将此JS文件放到页面中:

/*** Code for height: auto; transitioning ***/

(function(doc){

/* feature detection for browsers that report different values for scrollHeight when an element's overflow is hidden vs visible (Firefox, IE) */
var test = doc.documentElement.appendChild(doc.createElement('x-reveal-test'));
    test.innerHTML = '-';
    test.style.cssText = 'display: block !important; height: 0px !important; padding: 0px !important; font-size: 0px !important; border-width: 0px !important; line-height: 1px !important; overflow: hidden !important;';
var scroll = test.scrollHeight || 2;
doc.documentElement.removeChild(test);

var loading = true,
    numReg = /^([0-9]*\.?[0-9]*)(.*)/,
    skipFrame = function(fn){
      requestAnimationFrame(function(){
        requestAnimationFrame(fn);
      });
    },
    /* 2 out of 3 uses of this function are purely to work around Chrome's catastrophically busted implementation of auto value CSS transitioning */
    revealFrame = function(el, state, height){
        el.setAttribute('reveal-transition', 'frame');
        el.style.height = height;
        skipFrame(function(){
            el.setAttribute('reveal-transition', state);
            el.style.height = '';
        });
    },
    transitionend = function(e){
      var node = e.target;
      if (node.hasAttribute('reveal')) {
        if (node.getAttribute('reveal-transition') == 'running') revealFrame(node, 'complete', '');
      } 
      else {
        node.removeAttribute('reveal-transition');
        node.style.height = '';
      }
    },
    animationstart = function(e){
      var node = e.target,
          name = e.animationName;   
      if (name == 'reveal' || name == 'unreveal') {
        
        if (loading) return revealFrame(node, 'complete', 'auto');
        
        var style = getComputedStyle(node),
            offset = (Number(style.paddingTop.match(numReg)[1])) +
                     (Number(style.paddingBottom.match(numReg)[1])) +
                     (Number(style.borderTopWidth.match(numReg)[1])) +
                     (Number(style.borderBottomWidth.match(numReg)[1]));
                     
        if (name == 'reveal'){
          node.setAttribute('reveal-transition', 'running');
          node.style.height = node.scrollHeight - (offset / scroll) + 'px';
        }
        else {
            if (node.getAttribute('reveal-transition') == 'running') node.style.height = '';
            else revealFrame(node, 'running', node.scrollHeight - offset + 'px');
        }
      }
    };

doc.addEventListener('animationstart', animationstart, false);
doc.addEventListener('MSAnimationStart', animationstart, false);
doc.addEventListener('webkitAnimationStart', animationstart, false);
doc.addEventListener('transitionend', transitionend, false);
doc.addEventListener('MSTransitionEnd', transitionend, false);
doc.addEventListener('webkitTransitionEnd', transitionend, false);

/*
    Batshit readyState/DOMContentLoaded code to dance around Webkit/Chrome animation auto-run weirdness on initial page load.
    If they fixed their code, you could just check for if(doc.readyState != 'complete') in animationstart's if(loading) check
*/
if (document.readyState == 'complete') {
    skipFrame(function(){
        loading = false;
    });
}
else document.addEventListener('DOMContentLoaded', function(e){
    skipFrame(function(){
        loading = false;
    });
}, false);

/* Styles that allow for 'reveal' attribute triggers */
var styles = doc.createElement('style'),
    t = 'transition: none; ',
    au = 'animation: reveal 0.001s; ',
    ar = 'animation: unreveal 0.001s; ',
    clip = ' { from { opacity: 0; } to { opacity: 1; } }',
    r = 'keyframes reveal' + clip,
    u = 'keyframes unreveal' + clip;

styles.textContent = '[reveal] { -ms-'+ au + '-webkit-'+ au +'-moz-'+ au + au +'}' +
    '[reveal-transition="frame"] { -ms-' + t + '-webkit-' + t + '-moz-' + t + t + 'height: auto; }' +
    '[reveal-transition="complete"] { height: auto; }' +
    '[reveal-transition]:not([reveal]) { -webkit-'+ ar +'-moz-'+ ar + ar +'}' +
    '@-ms-' + r + '@-webkit-' + r + '@-moz-' + r + r +
    '@-ms-' + u +'@-webkit-' + u + '@-moz-' + u + u;

doc.querySelector('head').appendChild(styles);

})(document);

/*** Code for DEMO ***/

    document.addEventListener('click', function(e){
      if (e.target.nodeName == 'BUTTON') {
        var next = e.target.nextElementSibling;
        next.hasAttribute('reveal') ? next.removeAttribute('reveal') : next.setAttribute('reveal', '');
      }
    }, false);