Search code examples
angularjscssangularjs-animation

How to implement a flip over effect using AngularJS animations?

What would be the best way to achieve a flip over effect using AngularJS animations?

I would like the flip over effect to occur on click. Every time it's clicked, it should flip over to the other side.

Ideally, I guess, I'm looking for a directive implementation that uses Angular animations.

Solution

  • PLNKR - here is a seed of a configurable angular directive that provides 3d flipping functionality. I do not see any good reason why to use ngAnimate for it.

    basic usage

    <flip flip-width="200px" flip-height="100px">
   <flip-panel>
     content-front
   </flip-panel>
   <flip-panel>
     content-back
   </flip-panel>
</flip>

    Comments

    1. It appends css-styles on its own, to be fully independent.
    2. In a proper, generic directive all names should be configurable.
    3. flip-width and flip-height sets style of flip and both flip-panels.
    4. Directive makes some basic check, if both front and back are set.
    5. First flip-panel is front and the second is back.
    6. Due to usage of transclusion content of the flip-panel may be arbitrary html. (you are right Misha no transclusion needed)
    7. It only works in -webkit. (update to make it work in Firefox, just duplicate all pieces with -webkit with no prefix - you do not need -moz)

    UPDATE

    PLNKR - here is an updated and extended version. It shows what I meant by making the directive configurable. In more details:

    1. Introduced flipConfig via provider, that allows to set in app.config:
      • default dimensions
      • css class names
      • speed of the transition
      • if the flip action is triggered by a click on the panel
    2. Introduced flip-show attribute that specifies which side to show.
    3. Changing flip-show we can trigger the flip action from outside of the directive.
    4. It works in Firefox and [almost:-)] in IE11.

    (btw: it is just a seed and it may be improved in a lot of ways. E.g: specifying axis, specifying origin of the transform, specifying radius and margin of the panels, allowing flip on hover, defaults colors, margins and so on)