search

SamProf / MatBlazor

Material Design components for Blazor and Razor Components
http://www.matblazor.com
MIT License
2.84k stars 386 forks source link

Recommendations for the animations and gestures like swiping #85

Open sowsan opened 5 years ago

sowsan commented 5 years ago

https://material.io/design/motion/#principles

Saw that the ripple already there. I was using animation.js , but would like to get thoughts on getting the animations for the material components.

Eonasdan commented 4 years ago

There's Blazor.Animate that uses the AOS animation library. Personally it didn't like the idea of wrapping components inside of another component just for animations so I just used the AOS library directly and added/removed the aos-animate class and data-aos="" with bindings. Hope that helps

imtrobin commented 4 years ago

Is there some documentation on how this works? I've integerate Blazor.Animate, it works for components, but does not work on NavMenu or MatAppBar

Eonasdan commented 4 years ago

@imtrobin what animation are you trying to do on those components?

imtrobin commented 4 years ago

I'm trying to make the NavMenu items fade in one after another. I know it's not about useability, but i'm trying to make it cool.

For the header, I have header items animate in, working fine. What I want is header to animate in as well, so that is not working.

Eonasdan commented 4 years ago

yeah AOS probably isn't going to help you there. You'll likely have to do that with js/css

imtrobin commented 4 years ago

Why is that so? I could actually do it with the default NavMenu on a new project with Blazor.Animate, just not with MatNavMenu. I don't quite understand MatNavMenu works with animations yet.