Question

转换效果仅在onload上运行一次，但在单击另一个选项卡时不起作用。如何在每次更改标签时运行它？

单击导航按钮时，内容应显示过渡效果。 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;
}

Answer 1

您无法使用CSS转换在display: none;和display: block;之间进行转换。

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

#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()
})

Answer 2

由于你无法正确显示：无法动画，我会建议这样的解决方案：

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动画的旧浏览器中也可以使用。）

CSS3过渡不能重复

2 个答案: