javascript - 我使用了 w3schools 的现成设计。我想添加过渡

Question

我使用了 w3schools 的现成设计。当用户从左到右单击选择 w3-bottombar 动画时，我想添加过渡。颜色由 JavaScript 创建。我怎样才能？

function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
     tablinks[i].className = tablinks[i].className.replace(" w3-border-blue", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.firstElementChild.className += " w3-border-blue";

}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<a href="javascript:void(0)" onclick="openCity(event, 'sett1');">
      <div class="tablink w3-bottombar">

 <p style="text-align:left;"> choice 01  </p>    
 
 </div> </a> 
 
 
 <a href="javascript:void(0)" onclick="openCity(event, 'sett2');">
      <div class="tablink w3-bottombar">

 <p> choice 02  </p>    
 
 </div> </a> 
 
 
 <div id="sett1" class="city" style="display:none">
<p>choice 01 </p> 
   
</div>


 <div id="sett2" class="city" style="display:none">
<p> choice 02 </p> 
   
</div>

标签： javascripthtml

Answer 1

您可以覆盖正在添加的类，并将您的转换添加到它。

function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
     tablinks[i].className = tablinks[i].className.replace(" w3-border-blue", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.firstElementChild.className += " w3-border-blue";

}

.w3-border-blue{
  transition:all linear 2s;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<a href="javascript:void(0)" onclick="openCity(event, 'sett1');">
      <div class="tablink w3-bottombar">

 <p style="text-align:left;"> choice 01  </p>    
 
 </div> </a> 
 
 
 <a href="javascript:void(0)" onclick="openCity(event, 'sett2');">
      <div class="tablink w3-bottombar">

 <p> choice 02  </p>    
 
 </div> </a> 
 
 
 <div id="sett1" class="city" style="display:none">
<p>choice 01 </p> 
   
</div>


 <div id="sett2" class="city" style="display:none">
<p> choice 02 </p> 
   
</div>