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

Question

I would like to change classes in html tables in certain transition-duration.

I defined hospitalization and hospitalization2 classes

In terms of hospitalization, transition-duration didn't work well. On the other hand, in hospitalization2, it works well.

Why transition-duration didn't work in hospitalization and how to fix it?

Thanks

$(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>

Does this answer helps https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds? — hawks, Mar 03 '20 at 11:27

score 3 · Answer 1 · answered Mar 03 '20 at 11:28

3

you cant add transition to gradient colors, not supported

answered Mar 03 '20 at 11:28

Castle

417
3
17

Azametzin · Accepted Answer · 2020-03-03T11:39:01.260

Transition doesn't work for background: linear-gradient(). You can use background-size or background-position if you want to create some effect with it.

A solution would be to use a pseudo-element, like :before, to create the transition effect. In addition, add a span to wrap each text, then you can add z-index for the text to be in front of the pseudo-element.

$(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>

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

2 Answers2