Question

我有一个html页面，可以在按钮点击时更改一些内容（我正在使用onClick）。我做得很好。

现在我想尝试添加一些效果，以便在单击按钮时，文本，背景颜色等应该缓慢变化（在3-5秒内）。它在bootstrap中认为它被称为淡化效果。

我可以通过修改现有代码来实现这一目标：

＆＃13;

function myFunction() {
  document.getElementById("idQuote").innerHTML = 'It is better to play than do nothing.';
  document.getElementById("idQuoteBy").innerHTML = '- Confucius (Philosopher, 551 BC-479 BC)';
  
  document.body.style.background = '#ffc0cb';
  document.getElementById("my-content").style.backgroundColor = '#db7093';
  document.body.style.color = 'pink';    
}

＆＃13;

  body {
    background-color: #fff8dc;
	font: Verdana, Helvetica, sans-serif;
	color: maroon;
  }

  #my-content {
    background-color: #ffdead;
	margin: 200px 50px 100px 50px;
	border-radius: 10px;
  }
  
  .quote {
    margin: 0px 50px 0px 50px;
    text-align: center;
  }
  
  .quoteBy {
    margin: 0px 25px 0px 0px;
	text-align: right;
  }
  
  .buttonLine {    
    margin: 50px 0px 0px 0px;    
  }
  
  #newQuoteButton {
    display: inline-block;
    vertical-align: top;
	margin: 0px 0px 50px 450px;	
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div id="my-content">
    <br /><br /><h1 class="quote" id="idQuote">Quick Brown Fox Jumped Over The Lazy Dog! Quick Brown Fox Jumped Over The Lazy Dog!</h1>
    <br /><h4 class="quoteBy" id="idQuoteBy">....The Quick Fox</h4>
	<div class="buttonLine">
	  <button type="button" id="newQuoteButton" class="btn btn-primary btn-sm" onclick="myFunction()">New Quote</button>
	</div>  
  </div>
  
  <footer>
    <p class="text-center">Compiled by: Someones Name</p>    
  </footer>
</div>

＆＃13;

Answer 1

只需向body添加一些过渡属性即可。请参阅下面的示例。我希望它会对你有所帮助。

function myFunction() {
  document.getElementById("idQuote").innerHTML = 'It is better to play than do nothing.';
  document.getElementById("idQuoteBy").innerHTML = '- Confucius (Philosopher, 551 BC-479 BC)';
  
  document.body.style.background = '#ffc0cb';
  document.getElementById("my-content").style.backgroundColor = '#db7093';
  document.body.style.color = 'pink';    
}

  body {
    transition: all 1.5s ease-in-out; // ADD SOME TRANSITION
    background-color: #fff8dc;
	font: Verdana, Helvetica, sans-serif;
	color: maroon;
  }

  #my-content {
    background-color: #ffdead;
	margin: 200px 50px 100px 50px;
	border-radius: 10px;
  }
  
  .quote {
    margin: 0px 50px 0px 50px;
    text-align: center;
  }
  
  .quoteBy {
    margin: 0px 25px 0px 0px;
	text-align: right;
  }
  
  .buttonLine {    
    margin: 50px 0px 0px 0px;    
  }
  
  #newQuoteButton {
    display: inline-block;
    vertical-align: top;
	margin: 0px 0px 50px 450px;	
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div id="my-content">
    <br /><br /><h1 class="quote" id="idQuote">Quick Brown Fox Jumped Over The Lazy Dog! Quick Brown Fox Jumped Over The Lazy Dog!</h1>
    <br /><h4 class="quoteBy" id="idQuoteBy">....The Quick Fox</h4>
	<div class="buttonLine">
	  <button type="button" id="newQuoteButton" class="btn btn-primary btn-sm" onclick="myFunction()">New Quote</button>
	</div>  
  </div>
  
  <footer>
    <p class="text-center">Compiled by: Someones Name</p>    
  </footer>
</div>

Answer 2

在body，my-content，idQuote，idQuoteBy中使用transition属性

 -webkit-transition-duration: all 5s;
  transition-duration: all 5s;

如何慢慢改变bootstrap div的内容

2 个答案: