CODEWITHSUNDEEP
css
Seb D
Seb D

Reputation: 139

Transition only apply to one type of change - CSS

In this code, if you resize your screen, it'll change its size smoothly and will take a second to get there.

function f1(x) {
  x.classList.toggle('fade');
}
.div {
  width: 20vw;
  height: 20vh;
  background-color: #e50;
  opacity: 1;
  transition: 1000ms;
}

.fade {
  opacity: 0;
}
<div class='div' onmouseover="f1(this)" onmouseout="f1(this)">

</div>

I only want the opacity to change slowly like so. Everything else should change in 0s as is default.

Upvotes: 1

Views: 31

Answers (1)

zer00ne
zer00ne

Reputation: 43870

Add the opacity value to transition explicitly:

 transition: opacity 1s

Demo

function f1(x) {
  x.classList.toggle('fade');
}
.div {
  width: 20vw;
  height: 20vh;
  background-color: #e50;
  opacity: 1;
  transition: opacity 1s
}

.fade {
  opacity: 0;
}
<div class='div' onmouseover="f1(this)" onmouseout="f1(this)">

</div>

Upvotes: 2

Related Questions