0

I did some CSS transitions with opacity changes. Via javascript they started by adding a new class or removing them.

It's like:

.element {
   opacity: 0;
   z-index; -1;
   display: none;
   transition: opacity .2s linear;
}

.changeDisplay {
   display: block;
}

.show {
   z-index: 1;
   opacity: 1
}

Via javascript i made a eventListener that fires the class changes after a click. At first the .changeDisplay class will added, after a setTimeout (delay, 4) function the .show class will added too. The 4ms (should be the min allowed delay value) delay is important for the fade in animation (opacity transition) to work.

The problem is - sometimes this won't work as expected! The animation is sometimes laggy so the animation effekt isn't working at all (it looks like it just showed up via a display change).

Why is that and what can i do better to get smooth animations every single time? I observed this behavior in Chrome (also on android mobile chrome), Opera, Firefox and IE (Safari wasn't tested because of a lack of apples in my house).

Flo
  • 137
  • 3
  • 20
  • 4ms is a really small amount of time for human-eye to perceive a transition. More info here: https://stackoverflow.com/questions/7882713/can-a-human-eye-perceive-a-10-milliseconds-latency-in-image-load-time#7882769 – Dez Dec 17 '17 at 11:04
  • The 4ms is set so low because it should not be noticed by the user. If there would not be this low delay the opacity transition wouldn't work -> https://stackoverflow.com/questions/3331353/transitions-on-the-display-property The magic and noticable transition is set to 200ms and this is noticeable ;) (look on the transition attribute) – Flo Dec 17 '17 at 11:06

1 Answers1

0

During my experience, I have seen that an animation duration of around 0.7s seems to be the best if you want a small and subtle animation.

Besides that, what you can do it instead of just adding the delay, put the code for adding .show in a callback function. What this will do it add the .show class as soon as .changeDisplay class has been added.
Still want the delay?
transition-delay: 0.4s;

Shivam Dhawan
  • 47
  • 7
  • This callback function hint is nice, i will take a look on that! But the problmen with .7s transition - it takes to long for the user, time in which he can't do anything because in my case the site structure is changing for this span. The transition-delay won't work either, i allready tried it but if i use the display property - there is no attribute value in transition for display. – Flo Dec 17 '17 at 11:37