Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Anchoring Animations (ng-animate-ref) no way to transition between cloned element and new element #12539

Open
lee-tunnicliffe opened this issue Aug 10, 2015 · 7 comments

Comments

@lee-tunnicliffe
Copy link

I am trying to achieve a morphing animation between views using ng-animate-ref. The animation should follow the steps below:

  1. When the user clicks the element to go forwards or the back link to go backwards, Fade out the contents of the element by transitioning the opacity of the contents.

  2. Morph the element into it's new size and position using ng-animate-ref.

  3. Either fade out the cloned element to reveal the actual element underneath or fade in the actual element when the cloned element is removed from the dom.

It is the 3rd step that I cannot achieve. Here is a plunkr with what I have so far.

http://plnkr.co/edit/H41tfHjpmK6o5jm2XhoE?p=preview

The problem I have is that ng-anchor-out-remove happens too early (during the morph) and then there is no ng-animate-shim-remove on the real element that I could use. I can't think what else to do.

@gjr-qm
Copy link

gjr-qm commented Aug 29, 2015

You could introduce a delay in your enter animation so it starts when the leave animation ends.

Link to working plnkr fork: http://plnkr.co/edit/yxy655o8caCf4svZOLAQ?p=preview

What did i change?

Line 51 of your style.css changed from
transition: 2s linear opacity;
into
transition: 2s 2s linear opacity;

The second 2s is the delay

@lee-tunnicliffe
Copy link
Author

Thanks for your suggestion but the issue with this is I don't see the element morph anymore.

@gjr-qm
Copy link

gjr-qm commented Aug 29, 2015

Somehow the ng-animate-ref was removed (empty)... Try again with the link above or just change your own plnkr...

Still not the most robust solution, but if the animation is fast enough it will work i think.

@matsko
Copy link
Contributor

matsko commented Oct 5, 2015

@lee-tunnicliffe would this feature provide the functionality that you're looking for? #12577

Once the anchoring animation completes you could optionally fade out the leave element to reveal the one below.

@lee-tunnicliffe
Copy link
Author

Yes, that was my PR I referenced this issue in it. Didn't I link it correctly?

@matsko
Copy link
Contributor

matsko commented Oct 5, 2015

My mistake. I just scanned over this issue super quick. Let me think this over to see what we can do. But it sounds like a good idea.

@wawyed
Copy link

wawyed commented Dec 17, 2015

Is there an ETA on this feature?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants