6

I have created a rather complex Menu for a website. The menu lives from a huge amount of animation which is based on CSS3. However, when i navigate to a different page, the menu should build up initially - and without all the animations, but done JS-wise and not serverside.

Now i am wondering how i could completely disable all the transitions/animations temporarily, until the menu is built.

I thought about creating a subclass that overrides the animations but it does not seem to work, as it is always the animation/transition defined in the base class that is being used?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
SquareCat
  • 5,699
  • 9
  • 41
  • 75
  • Potentially relevant: http://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily – Mark Amery Mar 05 '14 at 11:50

2 Answers2

3

You could set the transition-duration to 0s while building the menu and then set it back to the desired value afterwards.

Jasper
  • 493
  • 3
  • 9
3

I’d suggest applying your animations/transitions via a class that’s added by JavaScript after the menu is built.

There is the animation-play-state property which can pause animations, but that only appeared (prefixed) in Safari 5 and Chrome 4 (as opposed to Safari 4 and Chrome 2 for the other animation properties), and I’m not sure if it’d work for your purposes.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • I have this feeling that you are absolutely right. And i have this feeling of incredible joy of not having thought of this before i wrote those 2.500 lines. I still dream of an easier solution though. – SquareCat Nov 29 '11 at 14:20
  • I know what you mean. Not sure if it’s easier — you could remove the class in question via JavaScript when the menu starts building, and re-add it after it’s done. (Although if there are other styles in the class apart from animation, you’d lose those too.) – Paul D. Waite Nov 29 '11 at 14:41
  • Yes, that's the point. It is pretty complex. What generally is a mystery to me, is why it is not possible to set an transition/animation with a new class and thus be able to override one that has been defined before. If that were possible, for example a "fade" transition could be timed differently than the according "appear" transition (when setting from opacity 0-1 and reverse) – SquareCat Nov 29 '11 at 14:44
  • Oh — I added a mention of `-webkit-animation-play-state` to the answer — thought I had before, although I’m not sure it’ll help your situation. – Paul D. Waite Nov 29 '11 at 14:44
  • For transitions, I think the intention was to keep them very simple in implementation, at the expense of flexibility. For animations, I think you can set the `-webkit-animation-name` property to `none` to disable animations. – Paul D. Waite Nov 29 '11 at 14:48
  • Unfortunately i use both, but more transitions than animations - and even more unfortunately, it i used in a public front-end. While being aware that many users won't be seeing any animations at all, i should implement a more fitting solution. I slowly get to the conclusion that i won't be able to get around restructuring all of it according to your suggestions. – SquareCat Nov 29 '11 at 14:57
  • Yeah — I think to achieve what you want, you’ll need to get your JavaScript to handle the adding of transitions. – Paul D. Waite Nov 29 '11 at 15:23