如何使其适用于 html 表中特定类的转换持续时间 [重复]

Posted 2023-03-06

【中文标题】如何使其适用于 html 表中特定类的转换持续时间 [重复]

【英文标题】：How to make it work for transtion-duration at paticular classes in html tables [duplicate]

【发布时间】：2020-06-15 18:27:15

【问题描述】：

我想更改某些transition-duration 中的html 表中的类。

我定义了hospitalization 和hospitalization2 类

对于hospitalization，transition-duration 效果不佳。另一方面，在hospitalization2 中，它运行良好。

为什么transition-duration 在hospitalization 中不起作用以及如何解决？

谢谢

$(function() 
  $("td").click(function() 
    $(this).addClass("hospitalization");
  );
);

.hospitalization 
  background: linear-gradient(to bottom, aqua 49%,aqua 1%, yellow 1%, yellow 50%);
  transition-duration:0.4s;


.hospitalization2 
  background-color:red;
  transition-duration:0.4s;


td 
  padding: 5px

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

【问题讨论】：

这个答案对***.com/questions/6542212/…有帮助吗？

【参考方案1】：

你不能为渐变色添加过渡，不支持

【参考方案2】：

转换不适用于background: linear-gradient()。如果你想用background-size 或background-position 创造一些效果，你可以使用它。

一种解决方案是使用伪元素（如:before）来创建过渡效果。另外，为每个文本添加一个span，然后你可以在伪元素前面添加z-index。

$(function() 
  $("td").click(function() 
    $(this).addClass("hospitalization");
  );
);

.hospitalization2 
  background-color:red;
  transition-duration:0.4s;


td 
  padding: 5px;
  position: relative;


td span 
  position: relative;
  z-index: 1;


td:before 
  content: '';
  background: linear-gradient(to bottom, aqua 49%,aqua 1%, yellow 1%, yellow 50%);
  position: absolute;
  height: 100%;
  opacity: 0;
  left: 0;
  top: 0;
  transition: 0.4s;
  width: 100%;


td.hospitalization:before 
  opacity: 1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1"><span>1</span></td>
  <td id="2"><span>2</span></td>
  <td id="3"><span>3</span></td>
  <td id="4"><span>4</span></td>
  <td id="5"><span>5</span></td>
  <td id="6"><span>6</span></td>
  <td id="7"><span>7</span></td>
  <td id="8"><span>8</span></td>
  <td id="9"><span>9</span></td>
  <td id="10"><span>10</span></td>
</table>