mikoskinen / blazor.animate Goto Github PK

It doesn't run for me. A couple of things to note BTW. Not important but there is no favicon.ico file in the project (there is on the server one) so there may as well be one there. I also receive the following error in the browser. Failed to load resource: the server responded with a status of 404 ()
dotnet.js

There is a Blazor 3.2.0 preview version now which would require minor changes. There is no Startup class anymore and Program.cs would need some adjustment. And your demo isn't using the current version of your library.

I got additional run time errors when I tried to update. However using the latest library and Blazor the animations work in my demo app.

So, what should i do in this situation?

Please, could this file be properly minimised or have another option blazorAnimateInterop.min.js.

Thank you :)

first of all thanks for this package its really useful but i find out that its not working without internet connection, i think you importing some scripts from url, please fix this

update: sorry my mistake, it works fine.

Hi,

I have got 2 Bootstrap cards, each inside its Animate component. The top card has Bootstrap 4 drop down menu. This menu opens underneath the second card. This is caused by Animate component as it works outside Animate or rather the way how Animate and Bootstrap dropdown works.

I think, it has got something with transforms. When I disabled them in Dev Tools, the menu appears on the top.

I am now trying to figure out if I need to change somehow css Bootstrap dropdown, or use completely different dropdown implementation, or change Blazor.Animate css.

Any suggestions?

Thank you.

Update 1: Not very helpful ..., if I add this on the Animate div. It fixes the problem, sort of on that card, the problem is that my cards are dynamic components so the other (3rd, 4th) card on the top would have same z-index so it wouldn't work.

    z-index: 1;
    position: relative;

Update 2: Possible solution, but I don't know about other implications and consequences :( .

I have replaced this transform: translateZ(0); with transform: none; and it seems working now

    [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        /*transform: translateZ(0);*/
        transform: none;
    }

It animates correctly on load. If an element is not visible on the screen, and I scroll down to it, it animates in. If I then scroll up and back down, it will animate again coming back into view.

The demo site linked to from the ReadMe isn't working:

http://animateblazorsamplessvc.azurewebsites.net/

This may be a duplicate of #7, unsure exactly based on the conflicting title and description there.

Is possible it slides only e.g. 10px so it is just a small subtle transition?

By the way, great work! :)

Thank you.

I am trying to use Blazor.Animate on Blazor Server page.

I have a div element to ZoomIn with small delay and duration. The element appears when browser first loads before the animation.
I need it not to be visible only with animation, and not when page loads to browser.

I tried it with other elements and even plain text. All animations like FadeIn, SlideIn etc. all behave the same way.
I see the element, and then it starts animating (I see the element on page without animation, and then it disappears and then animation starts from beginning - creating sort of flicker).

This does not happen on browser refresh but only first time when browser goes to the page url.

How can I prevent browser from showing the object before animation begins - at initial browser display ?

Tried to get this working with Delay but the animation start immediatly. Also tried using Blasorise implementation. Same issue.

Tried it with DelayMs = "5000" with [email protected](5). Same issue.

Solved it like this but it's not nice:

<Animate Animation="Animations.FadeIn"
		 DurationMs="1000"
		 @ref=@UnAuthorizedAnimation
		 IsManual="true">
	<h3>UnAuthorizedDisplay</h3>
</Animate>

using BlazorAnimate;
using System.Threading.Tasks;

namespace Wur.GroupTool.Blazor.Shared
{
	public partial class UnAuthorizedDisplay
	{
		private Animate UnAuthorizedAnimation;

		protected override async void OnInitialized()
		{
			await Task.Delay(5000);

			UnAuthorizedAnimation.Run();

			base.OnInitialized();
		}
	}
}

Hi I'm using Blazor.Animate, on a button click I expand a div with a component in it, it work well but my ask is: is there a way reverse the effect so collapse the same expanded div ?

Suppose I call .Run() to start the effect, up to me should need something like .Close() to reverse the effect.

Thank you a lot.
Gioking

Not working with Bootstrap modal or any element that is positioned fixed and it is child in DOM of aos element.
This is because transofrm animation creates new corrdinate system and top:0,left:0 no longer mean 0 from top of the page.

Hay thanks for your effort, it is very nice component.
Can we trigger animation in code behind.
I saw sample which re-render new components.
But much simpler would be to trigger animation from code behind.
What I am trying to do is to animate component before i hide them
I am trying to implement some kid of toggle button on main page
Button should animate fade out menu before hide them and vice versa.
Here is sample code for animating menu on showing this works pretty nice.
My problem is, I do not know how to animate nav component before I hide id.

Here is sample of MainLayout.razor

@inherits LayoutComponentBase
@using BlazorAnimate
@if (DisplayMenu)
{
    <Animate Animation="Animations.FadeRight"   DurationMs="300"  DelayMs="200">
        <div class="sidebar">
            <NavMenu />
        </div>
    </Animate>
}
<div class="main">
    <div class="top-row px-4">
        <button @onclick="ShowHideMenu">Show / hide</button>
    </div>
    <div class="content px-4">
        @Body
    </div>
</div>
@code {
    private bool DisplayMenu = true;
    private void ShowHideMenu()
        {
            DisplayMenu = !DisplayMenu;
            StateHasChanged();
        }
}

Can't compile, error: EaseOutEasing is a 'type', which is not valid in the given context.

So how do I apply the property?

can you gave the code for https://animateblazorsamplessvc.azurewebsites.net/testbed ? i tried manual once="false" but i can only click once for manual to function. the other click didnt work

Thanks for the library, this is a great start. Do we have outro, update, and list animations on the roadmap?

Specifically we can fade the counter "in" when it becomes visible, but there is no mechanism to fade the counter "out" when we need to hide it. Moreover, being able to set something up for updates and more complex lists is needed.

https://vuejs.org/v2/guide/transitions.html

Can you please provide a sample that would work on Blazor Web assembly.

Hi @mikoskinen, I found your library while searching for a good Blazor animation component and I found it really good.

I'm a creator of Blazorise component library and I think your work would really fit into Blazorise. What I propose is for you to become a collaborator on Blazorise and then make Blazor.Animate a part of Blazorise extensions. That way you would be part of a larger community and your work can reach more people.

I would really like you to consider it. Please let me know what you think.

Am I to assume that this only animates items as they appear (i.e. inside an @if block)?

There's no way to animate components or render-fragments as they disappear?

And there's no way to animate components or render-fragments as they move over to accommodate the appearing elements?

Apologies for the newbie question: I have a card centered on the screen. When the next button is clicked, I need to animate the card off-screen and the next card on screen. When the previous button is clicked, I need to animate the card off-screen and the next card on screen.

I was thinking I need to have overlapping div's and then run the two animations at the same time.

Suggestions, thank you, Karl

Hi there,

Is there really no way to reverse an animation without setting an anchor? I've tried some fairly creative solutions and can't think of anything to make this work without modifying the source.

Imagine you have a table row that you want to animate and this row is wrapper into div as it currently happens. The row inside this div is not a properly row.
It would be nice not to have that div and decide on the parent component which tag to render.