动画显示:无显示:内联
Animate display:none to display:inline
我正试图用两组不同的文本（文本a和文本B）制作一个网页，这两组文本的长度不同，并且不按a/B顺序排列（即文本B之前和之后有文本a）。
在顶部，有三个按钮：Show All、Text A和Text B。
单击Show All时，显示所有文本，单击Text A时，仅显示文本A文本，隐藏文本B文本，等等。
我想设置文本变化的动画（使用渐变动画）
有简单的方法吗？
function select(name) {
var navbar = document.getElementById("navbar");
var elems = navbar.getElementsByTagName("li");
var classes = [];
for (x = 0; x < elems.length; x++) {
var obj = elems[x].getElementsByTagName("a")[0];
obj.className = elems[x].id !== name ? "nav" : "navsel";
classes[x] = elems[x].id;
}
for (n = 0; n < classes.length; n++) {
var allelems = document.getElementsByClassName(classes[n]);
for (x = 0; x < allelems.length; x++) {
var s = allelems[x].className;
if (s.search(name) >= 0 || name === "all") {
s = s.replace(" hide", "");
} else if (s.search("hide") < 0) {
s += " hide";
}
allelems[x].className = s;
}
}
}ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
position: fixed;
top: 0px;
left: 0px;
background: #ffffff;
width: 100%;
height: 30px;
text-align: center;
vertical-align: middle;
}
li.nav {
float: left;
width: 33.3333%;
height: 100%;
display: table;
}
a.nav,
a:visited.nav {
display: table-cell;
font-weight: bold;
color: #ffffff;
background-color: #800000;
padding: 4px;
text-decoration: none;
vertical-align: middle;
}
a.navsel,
a:visited.navsel {
display: table-cell;
font-weight: bold;
color: #ffffff;
background-color: #C00000;
padding: 4px;
text-decoration: none;
vertical-align: middle;
}
a:hover.nav,
a:active.nav {
background-color: #A00000;
color: #ffffff;
}
a:hover.navsel,
a:active.navsel {
color: #ffffff;
}
.hide {
display: none;
}<ul class="nav" id="navbar">
<li class="nav" id="all">
<a class="navsel" onclick="select('all');">Show All</a>
</li>
<li class="nav" id="texta">
<a class="nav" onclick="select('texta');">Text A</a>
</li>
<li class="nav" id="textb">
<a class="nav" onclick="select('textb');">Text B</a>
</li>
</ul>
<br />
<br />
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2 class="texta">Text A</h2>
<p class="texta">We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity,
do ordain and establish this Constitution for the United States of America.</p>
<h2 class="textb">Text B</h2>
<p class="textb">
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.
<br />That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed,
<br />That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to
them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more
disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under
absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security.
<br />Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations,
all having in direct object the establishment of an absolute Tyranny over these States.
</p>
<h1>More Text</h1>
<h2 class="texta">Text A</h2>
<p class="texta">Don't cry because it's over, smile because it happened.</p>
<h2 class="textb">Text B</h2>
<p class="textb">Live as if you were to die tomorrow. Learn as if you were to live forever.</p>我刚刚为您写了一个快速脚本，希望它能进一步帮助您。
.content {
opacity: 0;
transition: opacity .75s ease-in-out;
}
.show {
opacity: 1;
transition: opacity .75s ease-in-out;
}<button class="article-a" onclick="document.getElementById('contentA').className = 'show';">Text A</button>
<button class="article-b" onclick="document.getElementById('contentB').className = 'show';">Text B</button>
<button class="article-all" onclick="document.getElementById('contentA').className = 'show';document.getElementById('contentB').className = 'show';">All Text</button>
<div id="contentA" class="content">First part</div>
<div id="contentB" class="content">Second Part</div>我认为最好使用opacity进行转换，在不透明度设置为1后，可以隐藏元素。
这里有一个简单的解决方案，不需要任何库，如Jquery。
使用setTimeout，只有在元素淡出后，我们才能赋予其display:none的样式。
<html>
<head>
<title>MCVE</title>
<style type="text/css">
ul.nav {
list-style-type:none;
margin:0;
padding:0;
position:fixed;
top:0px;
left:0px;
background:#ffffff;
width:100%;
height:30px;
text-align:center;
vertical-align:middle;
}
li.nav {
float:left;
width:33.3333%;
height:100%;
display:table;
cursor:pointer;
}
a.nav, a:visited.nav {
display:table-cell;
font-weight:bold;
color:#ffffff;
background-color:#800000;
padding:4px;
text-decoration:none;
vertical-align:middle;
}
a.navsel, a:visited.navsel {
display:table-cell;
font-weight:bold;
color:#ffffff;
background-color:#C00000;
padding:4px;
text-decoration:none;
vertical-align:middle;
}
a:hover.nav, a:active.nav {
background-color:#A00000;
color:#ffffff;
}
a:hover.navsel, a:active.navsel {
color:#ffffff;
}
.hide {
opacity:0;
}
.noDisplay{
display:none;
}
p, h2{
transition:
opacity 1s ease
}
.show{
animation-name: fadeIn;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
</style>
<script>
function select( element ){
if( element.parentElement.id == 'texta' ){
document.getElementById( 'all' ).childNodes[ 1 ].classList.remove( 'navsel' );
document.getElementById( 'all' ).childNodes[ 1 ].classList.add( 'nav' );
document.getElementById( 'textb' ).childNodes[ 1 ].classList.remove( 'navsel' );
document.getElementById( 'textb' ).childNodes[ 1 ].classList.add( 'nav' );
document.getElementById( 'texta' ).childNodes[ 1 ].classList.add( 'navsel' );
element.classList.add( 'navsel' );
var everyElement = document.getElementsByClassName( 'textb' );
for( var i = 0; i < everyElement.length; i++ ){
everyElement[ i ].classList.add( 'hide' );
}
removeElement = setTimeout( removeNowA, 900 );
}
else if( element.parentElement.id == 'textb' ){
document.getElementById( 'all' ).childNodes[ 1 ].classList.remove( 'navsel' );
document.getElementById( 'all' ).childNodes[ 1 ].classList.add( 'nav' );
document.getElementById( 'texta' ).childNodes[ 1 ].classList.remove( 'navsel' );
document.getElementById( 'texta' ).childNodes[ 1 ].classList.add( 'nav' );
document.getElementById( 'textb' ).childNodes[ 1 ].classList.add( 'navsel' );
var everyElement = document.getElementsByClassName( 'texta' );
for( var i = 0; i < everyElement.length; i++ ){
everyElement[ i ].classList.add( 'hide' );
}
removeElement = setTimeout( removeNowB, 900 );
}
else if( element.parentElement.id == 'all' ){
document.getElementById( 'texta' ).childNodes[ 1 ].classList.remove( 'navsel' );
document.getElementById( 'texta' ).childNodes[ 1 ].classList.add( 'nav' );
document.getElementById( 'textb' ).childNodes[ 1 ].classList.remove( 'navsel' );
document.getElementById( 'textb' ).childNodes[ 1 ].classList.add( 'nav' );
document.getElementById( 'all' ).childNodes[ 1 ].classList.add( 'navsel' );
var everyElement = document.getElementsByClassName( 'textb' );
for( var i = 0; i < everyElement.length; i++ ){
everyElement[ i ].classList.remove( 'noDisplay' );
}
var everyElement = document.getElementsByClassName( 'texta' );
for( var i = 0; i < everyElement.length; i++ ){
everyElement[ i ].classList.remove( 'noDisplay' );
}
fadeIn();
}
}
function removeNowA(){
var everyElement = document.getElementsByClassName( 'textb' );
for( var i = 0; i < everyElement.length; i++ ){
everyElement[ i ].classList.add( 'noDisplay' );
}
}
function removeNowB(){
var everyElement = document.getElementsByClassName( 'texta' );
for( var i = 0; i < everyElement.length; i++ ){
everyElement[ i ].classList.add( 'noDisplay' );
}
}
function fadeIn(){
var everyElement = document.getElementsByClassName( 'textb' );
for( var i = 0; i < everyElement.length; i++ ){
everyElement[ i ].classList.add( 'show' );
}
var everyElement = document.getElementsByClassName( 'texta' );
for( var i = 0; i < everyElement.length; i++ ){
everyElement[ i ].classList.add( 'show' );
}
}
</script>
</head>
<body>
<ul class="nav" id="navbar">
<li class="nav" id="all">
<a class="navsel" onclick="select( this );">Show All</a>
</li>
<li class="nav" id="texta">
<a class="nav" onclick="select( this );">Text A</a>
</li>
<li class="nav" id="textb">
<a class="nav" onclick="select( this );">Text B</a>
</li>
</ul>
<br /><br />
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2 class="texta">Text A</h2>
<p class="texta">We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain and establish this Constitution for the United States of America.</p>
<h2 class="textb">Text B</h2>
<p class="textb">
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.
<br />That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed,
<br />That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security.
<br />Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations, all having in direct object the establishment of an absolute Tyranny over these States.
</p>
<h1>More Text</h1>
<h2 class="texta">Text A</h2>
<p class="texta">Don't cry because it's over, smile because it happened.</p>
<h2 class="textb">Text B</h2>
<p class="textb">Live as if you were to die tomorrow. Learn as if you were to live forever.</p>
</body>
</html>就我个人而言，每当点击文本类时，我都会将fadein和fadeout JQuery方法附加到每一类文本中。您可以通过在一个简单的Java脚本中定义它们来实现这一点，该脚本将一个类淡入另一个类淡出，反之亦然
$("#texta").click(function(){
//Show texta and hide textb
$("#texta").fadeIn("slow");
$("#textb").fadeOut("slow");
});
$("#textb").click(function(){
//Show textb and hide texta
$("#textb").fadeIn("slow");
$("#texta").fadeOut("slow");
});
$("#all").click(function(){
//Show texta and hide textb
$("#texta").fadeIn("slow");
$("#textb").fadeIn("slow");
});
相关文章：
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- 动画显示:无显示:内联
- 剑道网格编辑内联下拉列表不显示
- 在我的案例中，如何将显示类型更改为内联元素
- <ul>显示内联块不起作用
- 如何将显示属性设置为与内联！重要的
- 替换“单击时”操作以显示内联输出
- Codemirror 内联显示 CSSLint 错误 (.addLineWidget）
- DIV 标签显示:内联块;
- 在移动 Safari 中隐藏/显示内联 SVG 时遇到问题
- Jquery显示:无，显示:内联块
- 无论分辨率如何，都可以在屏幕中间显示内联HTML/JavaScript弹出窗口
- 使用jQuery's滑动带显示:内联块
- 如何切换显示:内联和显示切换
- 动态调整元素的大小&显示内联
- 显示内联抛出错误
- 显示:内联;复制链接不起作用
- 如何使图像将类设置为显示:无，然后将特定 id 设置为显示:内联
- Jquery垂直滑块与显示内联块或浮动左
- 在开发人员窗口中显示内联样式元素，但在查看源代码时不显示
