A little note about using transitions...

User 2823310 Photo


Registered User
312 posts

You guys might be aware of this but since I only switched over to foundation a few days ago I thought I might just note a little thing I noticed with my first look at using transitions, more a fly by than anything for now but...

When you want to add in a transition on an element say let's say ease. If you click on all properties you'll see the ease function is already highlighted, you might assume that it will be included in the CSS since ease is already highlighted so you select your duration and delay.

Well I found out you have to actually select another function first, say linear, then go back to ease and select it. Only then it'll get written to the CSS. You can confirm that by using the inspector or by viewing the main CSS source code.
User 2846109 Photo


Ambassador
341 posts

I think 'ease' is the default value, though. So if there is no transition listed it defaults to ease so no extra code is needed.

https://www.w3schools.com/cssref/css3_p … nction.asp
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 244626 Photo


Registered User
811 posts

And it appears if deleting the transition the css remains....just with 0 values so some cleanup on reset styles is required.
Bootstrap 5 CSS Grid.
User 2823310 Photo


Registered User
312 posts

Jeff, you know I always wrote it in by hand and never noticed that ease was the default. :rolleyes: Your Universe site is an excellent example for using those effects by the way, it's a sweet looking website. Must have taken a lot of back end work getting those images correct so they look as nice as they do.

Twinstream, you can use reset to remove those.
Go back to the element in Design and select choose a style to reset, and you can reset it all or just the transitions for example.
User 2846109 Photo


Ambassador
341 posts

I had to look up weather 'ease' was the default or not but I had a feeling. I don't come from a coding background so most of the time I totally would miss anything such as default states, ;)

Thanks for the kind words regarding the Universe site. It was a labor of love for me and also a good excuse to get more familiar with the CoffeeCup products.

I used primitive.js to convert all the images into svg files. It's pretty fun to play with even if you aren't going to use it for an actual project.

https://ondras.github.io/primitive.js/

http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.