How to implement a flip over effect using AngularJS animations?

Question

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.

I'm not sure I understand your question. The example behind the link shows how to achieve the effect. What exactly do you struggle with? — a better oliver, Apr 15 '14 at 09:51
I'm looking for an "Angular way" to achieve this using Angular animations. — Misha Moroshko, Apr 15 '14 at 10:03

artur grzesiak · Accepted Answer · 2014-04-18T09:29:43.927

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

It appends css-styles on its own, to be fully independent.
In a proper, generic directive all names should be configurable.
flip-width and flip-height sets style of flip and both flip-panels.
Directive makes some basic check, if both front and back are set.
First flip-panel is front and the second is back.
~~Due to usage of transclusion content of the flip-panel may be arbitrary html.~~ (you are right Misha no transclusion needed)
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:

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
Introduced flip-show attribute that specifies which side to show.
Changing flip-show we can trigger the flip action from outside of the directive.
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)

Thanks for that! What would it take to make it work in Firefox? — Misha Moroshko, Apr 18 '14 at 01:13
BTW, `transclusion: true` shouldn't be there. Everything works fine without it. And, changing it to `transclude: true`, breaks things. — Misha Moroshko, Apr 18 '14 at 02:23
@Misha in Firefox you do not need any prefixes. You are right about `transclusion`. — artur grzesiak, Apr 18 '14 at 09:31
@AnthonyPillos you have to rotate around X-axis: http://plnkr.co/edit/GpuDuroDRF8RBJw6aU6v?p=preview — artur grzesiak, Sep 04 '14 at 06:09

score 7 · Answer 2 · answered Apr 18 '14 at 12:00

7

I had the same usecase just recently for an angular memory game.

My implementation is the same by the idea of the other answers. I also released the flipping code along with a DEMO.

Github: https://github.com/zwacky/angular-flippy

P.s.: Looks i'm late to the party ;)

answered Apr 18 '14 at 12:00

Simon Wicki

4,029
4
22
25

but how to trigger flipping by using a button instead of mouseOver ? – Tony Nov 28 '14 at 13:41
@Tony you would put the flip function in the directive onto your directive $scope and put in your html a ng-click="flip()". – Simon Wicki Nov 28 '14 at 13:43

j.wittwer · Answer 3 · 2014-04-18T05:26:43.100

You can use ng-click and ng-class to add a class when the flip container is clicked.

<div class="flip-container" ng-click="flip = !flip" ng-class="{'flip': flip}">
  <div class="flipper">
    <div class="front" style="background: lightblue;">
      front
    </div>
    <div class="back" style="background: lightgreen;">
      back
    </div>
  </div>
</div>

This is essentially the angular way of doing what Walsh suggested in his article:

Adding the flip class to the container element will flip the card using JavaScript -- no user hover required. A JavaScript comment like document.querySelector("#myCard").classList.toggle("flip") will do the flip!

The only change to David Walsh's css was removing the :hover selector - the html structure is unchanged. It works nicely in chrome and firefox.. but the flip isn't as pretty in IE.

Here is a working demo: http://plnkr.co/edit/0dn775vpuoOeh2PS1T6k?p=preview

Update
I created a simple directive to encapsulate this basic technique. It allows you to flip over a black card, to reveal a picture on the other side.

app.directive("flipReveal", function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'template.html',
    scope: {
      url: '=',
      flip: '='
    }
  }
})

Here is a link to a new demo: http://plnkr.co/X4pSav

demo

score 2 · Answer 4 · edited May 23 '17 at 12:16

Disclaimer Based on @artur's answer https://stackoverflow.com/a/23139242/1319998 , but hopefully both simplified and made more flexible.

A custom directive is the way to go, one that can be used as:

<flip flip-side="{{side}}">
  <flip-front>
    Front side contents
  </flip-front>
  <flip-back>
    Rear contents
  </flip-back>
</flip>

I think it should have certain properties:

Programatically controlled by an attribute. In this case, a string that is equal to 'front' or 'back'
```
<flip flip-side="{{side}}">....</flip>
```
this would allow programmatic access via the surrounding scope.
Integrated with ngAnimate/$animate. Specifically, if ngAnimate is removed or disabled, the animation should not occur, but the reveal of the other side happen immediately. Using $animate.addClass/$animate.removeClass would achieve this, adding/removing a flip-visible class together with display:block and display:none styles to make sure the right side is visible/hidden when the animations are disabled.
```
flip > flip-front, flip > flip-back {
  display: none;
}
flip > .flip-visible {
  display: block;
}
```
Controlled by CSS, with defaults. So if you want to change the duration of the flip, it's a CSS, and not a Javascript, addition.

So it will have a style sheet to add styles required for the various stages of $animate.addClass / $animate.removeClass CSS animations explained at Year of Moo and $animate docs . The class will be flip-visible, so the extra classes will be .flip-visible-add, .flip-visible-add-active, .flip-visible-remove, and .flip-visible-remove-active classes.

The full set of styles can be seen at http://plnkr.co/edit/bbYbMhiURnm6FqC9patp?p=preview, but the main construction is of the form:
```
.flip-visible-add {
  // Initial setup: time and initial, pre-animation, transform
}
.flip-visible-add.flip-visible-add-active {
  // Target transform
}
```

Putting all this together, the directive is quite short:

app.directive("flip", function($animate) {
  return {
    restrict : "E",
    controller: function($scope, $element, $attrs) {
      var elements = {
        'front': $element.find('flip-front'),
        'back': $element.find('flip-back')
      };
      $attrs.$observe('flipSide', function(visibleSide) {
        visibleSide = visibleSide || 'front';
        var otherSide = visibleSide == 'front' ? 'back' : 'front';
        $animate.removeClass(elements[otherSide], 'flip-visible');
        $animate.addClass(elements[visibleSide], 'flip-visible');
      });
    }
  }
});

This can all be seen in an example, together with the stylesheets to make it all work, at http://plnkr.co/edit/bbYbMhiURnm6FqC9patp?p=preview

Michal Charemza · Answer 5 · 2014-04-18T17:07:18.170

I realise there is a benefit to not integrating with the $animate service, and having a purely class-based solution.

If you use $animate with addClass and removeClass, but interrupt the animation (say, by clicking quickly and repeatedly on the element), the animation will 'jerk' to its end/starting point, and then animate from that position, at least on Chrome. Using a pure CSS solutions avoids this issue, and always animates from the exact current point, giving a smoother effect.

An added benefit is the solution is also simpler, and you don't need a custom directive.

For example, the HTML can be as follows:

<flip class="{{side === 'front' ? 'flip-front' : 'flip-back'}}">
  <flip-front>
    Front side contents
  </flip-front>
  <flip-back>
    Rear contents
  </flip-back>
</flip>

I use custom elements, but they don't need to have any directives attached: they are just for CSS to hook into:

flip > flip-front, flip > flip-back { 
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden; 
  /* Time can be overriden */
  transition: -webkit-transform 0.5s; 
  transition: transform 0.5s;
}

/* Front visible */
flip > flip-front {
  -webkit-transform:  perspective(800px) rotateY(0); 
  transform:  perspective(800px) rotateY(0);  
}
flip > flip-back {
 -webkit-transform:  perspective(800px) rotateY(180deg); 
 transform:  perspective(800px) rotateY(180deg);   
}

/* Back visible */
flip.flip-back > flip-front {
  -webkit-transform:  perspective(800px) rotateY(-180deg); 
  transform:  perspective(800px) rotateY(-180deg);  
}
flip.flip-back > flip-back {
 -webkit-transform:  perspective(800px) rotateY(0); 
 transform:  perspective(800px) rotateY(0);   
}

This can be seen in a demo at http://plnkr.co/edit/A7IeGa1JEsZishmTDTaK?p=preview

score 1 · Answer 6 · answered Apr 15 '14 at 10:38

I would simply add / remove a class on click.

If you want to hook into the angular animation system then take a look at the $animate service, in particular add/remove/setClass(). The service is usually used in directives. You might want to create a directive that reacts on a click event and triggers the animation. You even get informed when the animation has completed.

Chances are that it's not worth it ;)

score 1 · Answer 7 · answered Apr 17 '14 at 12:26

You are going to want to create 3 divs.

<div class="wrapper">
    <div class="front"></div>
    <div class="back"></div>
</div>

You then position back behind front using z-index, and flip it upside down using rotateX (-180deg or so). Set a transition on wrapper as well.

Then, on click of wrapper, rotateX(+180deg). This will pretty much infinitely flip it over.

** Update: For angular, bind to click and use setClass to toggle between two classes on wrapper, one at rotateX(0deg) , the other at rotateX(180deg)

score 1 · Answer 8 · edited Nov 24 '17 at 06:19

Here is a slightly modified version of artur's answer:

DEMO

angular.module('FlipDemo', []).directive("flip", function() {  
  return {
    restrict : "A",
    scope: true,
    link: function(scope, element) {
      var $panels = element.css({ position: 'relative' }).children().addClass("flip-panel");  
      var frontPanel = $panels.eq(0);
      var backPanel = $panels.eq(1);
      
      scope.showFrontPanel = function() {
        frontPanel.removeClass("flip-hide-front-panel");
        backPanel.addClass("flip-hide-back-panel");
      };
      
      scope.showBackPanel = function() {
        backPanel.removeClass("flip-hide-back-panel");
        frontPanel.addClass("flip-hide-front-panel");
      };
            
      scope.showFrontPanel();
    }
  }
});

.flip-panel {
  position: absolute;
  width: 100%;
  height: 100%;
  
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  
  -webkit-transition: -webkit-transform .4s;
  -moz-transition: -moz-transform .4s;
  
  -webkit-transform: perspective(800px) rotateY(0deg);
  -moz-transform: perspective(800px) rotateY(0deg);
}
.flip-hide-back-panel {
  -webkit-transform: perspective(800px) rotateY(180deg);
  -moz-transform: perspective(800px) rotateY(180deg);
}
.flip-hide-front-panel {
  -webkit-transform: perspective(800px) rotateY(-180deg);
  -moz-transform: perspective(800px) rotateY(-180deg);
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="FlipDemo">
  <div style="width: 100px; height: 150px">
    <div flip style="width: 100%; height: 100%">
      <div style="background-color: green">
        <div>Front</div>
        <button ng-click="showBackPanel()">Show Back</button>
      </div>
      <div style="background-color: blue">
        <div>Back</div>
        <button ng-click="showFrontPanel()">Show Front</button>
      </div>
    </div>
  </div>
  <br>
  <div style="width: 150px; height: 100px">
    <div flip style="width: 100%; height: 100%">
      <div style="background-color: green">
        <div>Front</div>
        <button ng-click="showBackPanel()">Show Back</button>
      </div>
      <div style="background-color: blue">
        <div>Back</div>
        <button ng-click="showFrontPanel()">Show Front</button>
      </div>
    </div>
  </div>
</body>
</html>

Main differences:

Works in Chrome and Firefox.
More flexibility with when the flip happens.
Just one directive rather than two. Less code.
I took the CSS outside of the directive for clarity sake.

How to implement a flip over effect using AngularJS animations?

8 Answers8

basic usage

Comments

UPDATE

Linked