1

过渡效果仅在加载时运行一次，但在单击另一个选项卡时不起作用。每次更改选项卡时如何使其运行？

单击导航按钮时，内容应与过渡效果一起显示。HTML：

<body onload="setCurrent('home','home_content')">
<div id="wrap" class="center">
    <div class="top">
        <header class="left">
            <h1><a href="#">transition</a></h1>
        </header>
    </div>
    <div class="right">
        <nav class="menu">
            <ul>
                <li><a class="" id="home" onclick="setCurrent('home','home_content')">Home</a></li>
                <li><a class="" id="about" onclick="setCurrent('about','about_content')">About</a></li>
            </ul>
        </nav>
    </div>
    <div id="main">
        <div id="place">
            <div id="home_content" class="content">
                <h3>Home</h3>
            </div>
            <div id="about_content" class="content">
                <h3>About</h3>
            </div>
        </div>
    </div>
</div>

CSS：

#place .content{
    height: 1px;
    padding: 20px;
    margin: 0;
    overflow: hidden;
    transition:all 2s ease;
    -moz-transition:all 2s ease; /* Firefox 4 */
    -webkit-transition:all 2s ease; /* Safari and Chrome */
    -o-transition:all 2s ease; /* Opera */
    -ms-transition:all 2s ease; /* MS */
}
#place .hide{
    display:none;
}

#place .expand{
    display:block;
    height:500px;
    background-color:#f00;
}

JS：

function setCurrent(current,currentContent){
    document.getElementById('home').className = 'none';
    document.getElementById('about').className = 'none';

    document.getElementById('home_content').classList.remove('expand');
    document.getElementById('about_content').classList.remove('expand');

    document.getElementById('home_content').classList.add('hide');
    document.getElementById('about_content').classList.add('hide');

    document.getElementById(current).className='current';
    document.getElementById(currentContent).classList.remove('hide');
    document.getElementById(currentContent).classList.add('expand');
    return;
}
4

2 回答 2

0

您不能在 CSS 过渡之间display: none;和display: block;使用 CSS 过渡进行过渡。

我不确定你想要达到的效果，但是改变......

#place .hide{
    opacity: 0;
}

将帮助您了解正在发生的事情。

如果要display: none在转换完成后设置，可以添加一些 javascript：

// webkitTransitionEnd: Opera and Chrome
// transitionend: Firefox and IE 10
// otransitionend: Opera  >= 12
// oTransitionEnd: Opera  <  12
// http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

$('#place .hide').on('transitionend otransitionend oTransitionEnd webkitTransitionEnd', function(){
  $(this).hide()
})
于 2012-09-05T08:55:32.593 回答
0

由于您无法正确设置 display: none 的动画效果，因此我建议使用如下解决方案：

http://jsfiddle.net/VgLEG/5/

如您所见，有一些变化：

没有隐藏的类。您希望默认情况下隐藏所有内容。这样以后的矛盾就会减少。

而不是显示无，我建议

#place .content{
    height: 0;
    padding: 0 20px;
    opacity: 0;
}

#place .content.expand{
    height:500px;
    padding: 20px;
    opacity: 1;
    background-color:#f00;
}

这样浏览器就知道要为什么设置动画：它会褪色（不透明度），它会向上/向下滑动（高度），并且还会在填充元素的宽度时为它设置动画。

（使用 jquery 会更容易，也可以在 IE8 和其他不支持 css 动画的旧浏览器中工作。）

于 2012-09-05T09:31:32.890 回答