如何使其在 html 表中特定类的过渡持续时间内工作

Question

我想更改某些 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>

Answer 1

您不能向渐变颜色添加过渡，不支持

Answer 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>

如何使其在 html 表中特定类的过渡持续时间内工作

How to make it work for transtion-duration at paticular classes in html tables

html

javascript

css

css-transitions

如何使其在 html 表中特定 类 的过渡持续时间内工作

How to make it work for transtion-duration at paticular classes in html tables

html

javascript

css

css-transitions

如何使其在 html 表中特定类的过渡持续时间内工作