Card Animation - Horizontal Flipping

ionic-v1
1

Hi, guys. I’m attempting to achieve a horizontal card flip, not the default flip provided by ngAnimate for a card class. There is a front and a back to the card.

I’m not exactly sure how to achieve this effect. Do I need to create two div elements with the class of card? (a front and a back), have the back delay it’s visibility for the duration of the animation once the instance of the front is clicked and subsequently hidden?

Can this be achieved by flipping the same card and just replacing the content body of the card itself triggered by ng-click?

I’m unsure of what the best course of action is. I appreciate any help! Thanks in advance.

1 Like
2

Hey @SudoStack,

Do you mean like this? http://davidwalsh.name/demo/css-flip.php

This would be a custom CSS trick (not related to Ionic). Taking a look at that example, it seems he has one wrapping div with two children: one for the front of the card and one for the back.

This explains it best: http://davidwalsh.name/css-flip

3 Likes
3

I enjoyed that article but the resource that really got me over the hump was CSS Transforms.
The interactivity was worth much more than 3.99.

4

Would love to see a sample Ionic app with the horizontal flip. If you get one running and care to share, please let us know.

5

Hi, did you manage to make it work? I’m working on something similar right now and I would be very interested. Thanks.
// Sam

1 Like
6

I got the cards to flip basically using ngAnimate (http://augus.github.io/ngAnimate/). I then added the appropriate classes to the template that contained the cards. Here’s a link to the repo and where I used the classes: https://github.com/sudostack/SweatR/blob/master/public/templates/cards.html

4 Likes
7

It’d be great to see a demo on your sudostack website.

FYI : I reference your post about Side Menus all the time to people seeking help. It helped me a lot. Thanks.

8

That’s in order! I’ve got a backlog of things I’d like to share, but I’ll make this a priority once I finish the current project. I’m so happy that it actually helped you and others. :smile:

9

Hide I am new to ionic and trying to figure out the same thing too.
CSS transform creates memory leaks.
I am trying to make sense of your project files on git, can u share in which line of code/file the magic works?
I didnt see how it is done in the cardsController file.