Bug when using transition

[batata004]

Hi,

Recently I was told that in the next weeks/months there will be an update to FUI where people will be able to build a custom transition component, selecting just some transitions to be present in the semantic.css file.

This is a huge improvement! So, I decided to drop animate.css library in the most SEO critical websites I optimize since the most important transitions of animate.css already exists in the transition component of FUI. So I went ahead and removed the animate.css dependency and made the necessary changes in my code.

Using animate.css the user just have to set a class animated to the element that he wants to animate and then, add classes like fadeIn later, when he wants the element to animate. Pretty easy. And if you want to add another animation later, just make sure to remove the fadeIn class and add another one, like bounceIn. Pretty great.

So I went ahead and used the same analogy to FUI - and it worked perfectly! If I just add the transition class to any element and later add the class fade up in it works perfectly, the element animates beautifully! No need to call the .transition() function using Javascript. JUST add the fade up in class when you need it to animate and it works perfecty. No bug here.

So I went ahead and wanted to change the duration of the transition. With animate.css I can simply do this:

.animated{
	-webkit-animation-duration:3s !important;
	animation-duration:3s !important;
}

Since all the elements already have the animated class, setting a value to animation-duration would affect all the animations of the website. Great, and it works fine. I went ahead with FUI and did the same, but with the transition class, like so:

.transition{
	-webkit-animation-duration:3s !important;
	animation-duration:3s !important;
}

Then, animations didnt work smoothly any more and animations also didnt respect that duration of 3 seconds.

Take this pretty minimalistc demonstration of the FUI doing a great job (without changing animation-duration):

https://jsfiddle.net/mfz2r7yk/

Just hover the "Pacotes" word and you will see the animation works just fine. Now do the same in the link below, where I change the animation-duration:

https://jsfiddle.net/t2n8srzp/3/

You will see the animation does not take 3 seconds, and it also isnt smooth, it is not "fluid motion".

I know that maybe I am not using this component the "right way" but it's pretty nice that it works without having to call the transition() method everytime I want to animate something (I know I can set the duration of the animation in the transition() call). Also, just adding/removing the class when I want to animate something, is pretty straighforward and compatible with other libraries - most libraries that serve to animate things, use the same approach: just add/remove animation classes when needed, no need to call special JS functions to do that.

NOTE: I am aware animate.css in the latest version changed the animated class name to another name to avoid conflict with other libraries, but it still works the same as I mentioned above.

[ko2in]

You're invoking the popup with JS, and the transition are handled by JS. The default settings for delay is 50ms while transitioning in and 70ms while transitioning out, and the transition mode is scale by default as per documentation (https://fomantic-ui.com/modules/popup.html#/settings). That's what you get in your fiddle (https://jsfiddle.net/t2n8srzp/3/).

I guess, you would need to demonstrate the popup without invoking popup. Here's example (https://jsfiddle.net/b8Ly03aj/). Try to put mouse over the link and then move the mouse over the menu. You'll see the transition will apply the same in the CSS.

[batata004]

@ko2in Thank you for your attention. I understood what you said and totally agree with you, however why does overriding the animation-duration of .transition creates this bug? By default, the .transition is set with 600ms at animation-duration. Why changing it to any other value creates the problem that I reported on ##1

The default is 600 and despite the popup is being handled by JS, why changing this default value to any other value makes the transition bad?

[ko2in]

@batata004 Your link is leading to irrelevant issue.

[lubber-de]

@batata004 I think this strange behavior is happening, because the popup module will still add inline CSS for the animation-duration, despite your own !important CSS setting, which confuses the browser.
As @ko2in showed in his jsfiddle, when using the raw transition css classes, your css override for animation-duration works as expected.

To fix your issue when still using .popup, set the duration to false. This way the transition module won't create an inline style for animation-duration and will use your 3s given by your css value

If you don't want to set the duration:false setting to every of your popup components, you could try to override the default setting for the popup module by

	$.fn.popup.settings.duration = false;

See https://jsfiddle.net/lubber/f02wto8u/10/

[batata004]

@batata004 Your link is leading to irrelevant issue.

My friend, I am really sorry. When I was typing the phrase "...that I reported on #1..." for some reason when I type hashtag and then the number 1, github will autofill with some number of an older issue. Then I hit enter to jump line and github accepted the first occurrence. On older forums (or on XDA) when you want to point to a specific comment in the same thread you use hashtag + number where the number is the position of that comment on the current thread!

@lubber-de again thanks a lot! Your suggestion saved the day, now I can move on! Thank you so much and sorry for the confusion pointing to a "random" ticket number because I pressed enter.

[lubber-de]

Recently I was told that in the next weeks/months there will be an update to FUI where people will be able to build a custom transition component, selecting just some transitions to be present in the semantic.css file.

This is available in the just now released 2.8.6 . Enjoy your even more reduced css file :)

[batata004]

@lubber-de that's awesome news! Now I will start optimizing several websites with this new build! Thanks a lot!!!!