CSS3转换不能重复 [英] CSS3 transition cannot repeat
问题描述
转换效果仅在onload上运行，但在单击另一个选项卡时不起作用。
每次更改标签页时如何使其运行？
The transition effect run only once onload, but not work when clicking another tab. How to make it run when changing tabs every times?
点击导航按钮时，内容应显示过渡效果。
HTML：
When the navigation button is clicked, the content should be show up with the transition effects. 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;
}
推荐答案
没有正确，我建议这样的解决方案：
Since you cannot animate display: none properly, I would suggest a solution like this:
如您所见，有一些变化：
As you can see there are a few changes:
这里不是一个隐藏的类。您希望默认情况下隐藏每个内容。
There souldn't be a hidden class. You want every content to be hidden by default. This way there will be less inconsistencies later on.
而不是显示无，我建议
#place .content{
height: 0;
padding: 0 20px;
opacity: 0;
}
#place .content.expand{
height:500px;
padding: 20px;
opacity: 1;
background-color:#f00;
}
这样浏览器知道什么是动画：它会褪色它将向上/向下（高度）滑动，并且还会为元素宽度添加动画效果。
This way the browser knows what to animate: It will fade (opacity), it will slide up/down (height), and also animate the padding too as it adds to the elements width.
（这将更容易与jquery，工作在IE8和其他旧的浏览器不支持css动画。）
(This would be easier with jquery, and would also work in IE8 and other older browsers not supporting css animations.)
这篇关于CSS3转换不能重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
