Git Product home page Git Product logo

blazor.animate's People

Contributors

mikoskinen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blazor.animate's Issues

Not working with Bootstrap modal

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.

not working without internet connection

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.

Bootstrap 4 - Dropdowns

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.

image

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.

image

    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;
    }

Hot to trigger animation in code behind before hiding componetns

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();
        }
}

Question: Can I use this library to animate cards on and off screen?

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

Decide which element to render

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.

Animate disappearing or moving elements? Or just appearing ones?

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?

Transition Animations

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

I don't think the WebAssembly demo is working

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.

Page shows element before animation on Blazor Server

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 ?

Reverse effect

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

Blazor.Animate is now part of Blazorise

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.

No way to reverse an animation without an anchor?

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.

Animates twice

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.

Delay doesn't seem to do anything

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();
		}
	}
}

Cant apply Easing

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

So how do I apply the property?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.