I'm trying to get a div container with some text to fade in after the page loaded, but I fail. I was using the ng-animate directive like this:
<div class="motd" style="text-align: center;" ng-init="quote = getQuote();">
<div class="slide-fade" ng-class="animation">
<span class="quote"><i>{{quote.content}}</i></span><br><br>
<span class="author">{{quote.author}}</span>
</div>
</div>
Which obviously does not work, due to the fact that the animation does not get triggered by a click or something like that.
So how do I tell the browser that after the page loaded, it should fade in my text?
I hope you can help me!
Edit: At the date where I asked, I did not know that animations will also trigger when the page has loaded. I always thought there have to be some "user interaction" like a click or something to trigger them.
If you're using bootstrap, you can do this:
<html ng-app="myApp" ng-strict-di>
<head>...</head>
<body ng-init="ngLoaded = true" class="fade" ng-class="{ in: ngLoaded }">
<div>Content</div>
</body>
</html>
It may also work do to it this way as well:
<body
ng-app="myApp"
ng-strict-di
ng-init="ngLoaded = true"
class="fade"
ng-class="{ in: ngLoaded }">
<div> Content </div>
</body>
The fade class has 0 opacity and the in class applies the transition. ngLoaded will become true (in the $rootScope, I believe) as soon as angular has loaded due to ng-init="ngLoaded = true".
I use this so that the page doesn't blip with bits of angular brackets and such while the page loads.
I don't see the problem.
You just want to have animation when the element appears( you can think about it that way right? ).
Basicaly what I would do.
I would use then animate.css
http://daneden.github.io/animate.css/
and I would just add:
class="animated fadeIn"
Or plain css with this animation.
What I like to do is to use delay
.delayedx1{
animation-delay: 0.2s !important;
-webkit-animation-delay: 0.2s !important;
-moz-animation-delay: 0.2s !important;
-o-animation-delay: 0.2s !important;
-webkit-transition-delay:0.2s;
transition-delay:0.2s;
}
x2 x3 x4 or in ng repeat delay directly in "style" based on $index.
One way to do this is to use a flag (like $scope.fade = false;) to indicate that the page has loaded. Then, on your element, you'd use an ng-class with a conditional e.g.
class="animation" ng-class="{'fade-in': fade }"
The actual fade would be handled by CSS.
.animation { opacity:0; transition:all 200ms ease-in-out; }
.animation.fade-in { opacity:1; }
In your case, the fade-in condition could be as simple as ng-class="{'fade-in': quote }" since any truthy value you cause the class to get applied.
Here's a working plunker for you to play around with: http://plnkr.co/edit/ncqEB3PafIWbwv0UH1QG?p=preview
Related
My question is in regard of best practice / preferred readability in Angular 1.X with ng-show and ng-hide.
When using ng-hide and ng-show, is it advised to stick to one and to alternate the value I am evaluating or should i alternate between the two in order to keep the value in the expression the same?
See the following examples. Is one preferred over the other and if so why?
Assume that there are only two states, sportSelected can be Hockey or Football that is it, so there are two states.
Using only ng-show and switching the value
<div class="col-xs-4" ng-show="vm.sportSelected=='hockey'">
NJ Devils
</div>
<div class="col-xs-4" ng-show="vm.sportSelected=='football'">
NY Jets
</div>
<div class="col-xs-4" ng-show="vm.sportSelected=='football'">
NY Giants
</div>
Alternating between ng-show and ng-hide to keep the value the same
<div class="col-xs-4" ng-show="vm.isHockeySelected">
NJ Devils
</div>
<div class="col-xs-4" ng-hide="vm.isHockeySelected">
NY Jets
</div>
<div class="col-xs-4" ng-hide="vm.isHockeySelected">
NY Giants
</div>
The top seems more clear to me but it could just be due to poor method and variable names. I am looking through the angular documentation and I cant seem to arrive at what the preferred result is. Is one preferred over the other?
Edit: Flagged this to be closed, I realized this is pretty opinion based like tabs vs spaces even though I think one solution has benefits over the other
ng-hide and ng-show both work in different ways. They are essentially CSS classes which either hide or show the specified div, depending on how the value evaluates.
<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="myValue"></div>
if myValue evaluates to true then the div would be visible
<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="myValue" class="ng-hide"></div>
however, in the second example, the div would be hidden as the class is set to that of ng-hide.
also you can run ng-show or ng-hide to check if the value evaluates to false, like so: <div ng-show="!myValue"></div>
Due to the nature of the digest cycle in Angular, these checks will be ran on page load. If you do not want the div to be shown on the page, it can be recommendable to use ng-if, rather than ng-show or ng-hide, as it will not load on the page, as opposed to simply hiding it.
In the snippet below you will see an example working for both ng-hide and ng-show, using the value of the ng-model value response of the input checkbox 'checked'. Which gives a boolean response.
When it is clicked on, the value for 'checked' evaluates to true. When it is unclicked, the value evaluates to false. When the ng-model evaluates to false, it shows the ng-hide div, when the ng-model evalutes to true, it shows the ng-show div.
Further reading here: Angular ng-show documentation
#import url(../../components/bootstrap-3.1.1/css/bootstrap.css);
.animate-show {
line-height: 20px;
opacity: 1;
padding: 10px;
border: 1px solid black;
background: white;
}
.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
transition: all linear 0.5s;
}
.animate-show.ng-hide {
line-height: 0;
opacity: 0;
padding: 0 10px;
}
.check-element {
padding: 10px;
border: 1px solid black;
background: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-show-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
</head>
<body ng-app="ngAnimate">
Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br/>
<div>
Show:
<div class="check-element animate-show" ng-show="checked">
<span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
</div>
</div>
<div>
Hide:
<div class="check-element animate-show" ng-hide="checked">
<span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
</div>
</div>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
Whether or not you use ng-hide or ng-show should be based on how you want the page to appear by default. If you are controlling the visibility of an element that will be hidden by default and only shown after the user completes some action (like selecting a sport), then you want to use ng-show. If the element is to be shown by default and only hidden after some user action (maybe a div that says 'select a sport' that disappears once a sport is selected), then you want to use ng-hide.
Using the directives this way will contribute more toward readability than worrying about how the boolean condition itself is specified. It also has an important practical benefit. If you use ng-hide for something that is supposed to be hidden by default, you might see the element flicker each time you load the page, because in early $digest cycles before your scope can be fully evaluated, the result of that condition will be falsy, which will cause the element to appear briefly before it disappears.
You've got the right idea in the top example (looks like you have a syntax issue with the quotes though).
I am not able to understand how the ngAnimate works exactly. here is my doubt.
1) ngAnimate - only works on directives?
2) how to make ng-animate work without the directive
3) Any of above way, how to add call back after animation complete?
Because i see all the animation examples only with directives.
I have a small demo here, any one help me to animation both without directive and with directive approach to simply adding a class name as `fade'?
my CODE:
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2>Let me Fade</h2>
</div>
</div>
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2>Let me Fade</h2>
</div>
</div>
Demo to update
I am not able to understand how the ngAnimate works exactly. here is
my doubt.
ngAnimate is a module that provides support for animations in angular apps. There are two ways to make use of animations when ngAnimate is used: by using CSS and JavaScript. For CSS based animations, angularjs adds a class ng-enter/ng-leave whenever an element is shown/removed from 'view'. You simply need to play with these classes to make the animation work!
Prerequisite:
You would need to add the library for angular-animate
<script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js">
</script>
and include ngAnimate as the dependency in your myApp module.
var myApp = angular.module('myApp', ['ngAnimate']);
1) ngAnimate - only works on directives?
Yes. You cannot use ngAnimate without directive.
According to documentation, following directives are "animation aware":
ngRepeat, ngView, ngInclude, ngSwitch, ngIf, ngClass,
ngShow, ngHide, ngModel, ngMessages and ngMessage
2) how to make ng-animate work without the directive
You cannot!. Remember, even ng-click is a directive
3) Any of above way, how to add call back after animation complete?
Yes, You can add a callback after the animation is complete using the $animate service(which would usually be done in a custom directive) and use $animate.leave(element, [options]);
Have a look at this example for triggering events after the animation ends.
Finally, here is the updated demo you mentioned in question.
You may toggle a flag to true/false with each click on <h1> and make content inside <h2> hide/show based on flag.
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2 ng-if="flag" class="fade">Let me Fade</h2>
</div>
</div>
Also, you'd need to handle fade-effect with css
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
.fade.ng-enter.ng-enter-active {
opacity:1;
}
.fade.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.fade.ng-leave.ng-leave-active {
opacity:0;
}
Hope it helps!
<div class="container" ng-app="myApp">
<div class="content" ng-controller="count">
<h1 ng-click="animate()">Click ME</h1>
<h2 ng-if="clicked" class="animate-if">Let me Fade</h2>
</div>
I added a variable named clicked which is set to true or false to animate the Let me Fade Text
var myApp = angular.module('myApp', []);
myApp.controller('count', function($scope) {
$scope.clicked=false;
$scope.animate = function () {
$scope.clicked=!$scope.clicked;
}
});
In this JS file upon clicking the click me button the variable clicked is set to true or false .
**
h2.fade {
opacity : 0;
transition: opacity 1s ease-in-out;
}
.animate-enter, .animate-leave {
transition: 500ms ease-in all;
position: relative;
display: block;
}
.animate-enter.animate-enter-active, .animate-leave {
left: 0;
}
.animate-leave.animate-leave-active, .animate-enter {
left: 500px;
}
**
Here in the css file i added css for the class animate which acts upon clicked variable if the variable is true it goes for animate-enter-active
otherwise it goes for leave-active
Angular's animate-repeat isn't applying the ng-move class when it seems like it should, so I'm confused and unable to create the animation I want.
I'm using ng-repeat with a custom filter to add and remove divs from a horizontal row:
<div id="presidents">
<div ng-repeat="president in presidents | showPresident:this" class="pres animate-repeat" id="{{ president.birth }}" >
<a href="{{ president.url }}" target="_blank">
<img src="{{ president.imageURL }}" alt="{{ president.name }}">
</a>
<p>{{ president.name }}</p>
</div>
</div>
I'm trying to create animations for when the divs are added and removed from the DOM. The Angular docs for ng-repeat state that there are three classes available for this type of animation: ng-enter, ng-leave, and ng-move. I've applied CSS animations to the enter and leave classes so that the divs fade in and out.
.ng-enter {
animation: zoomIn 1s;
}
.ng-leave {
animation: zoomOut 1s;
}
When a div fades in or out, though, the others have to slide into or out of its way and it seems like the ng-move class should be applied while that happens so that I can animate the process, but the class is never applied, so the divs just snap over instead of sliding the way I'd like. I verified that the class is never applied by giving it a red border:
.ng-move {
border: 4px solid red;
}
So, am I misunderstanding ng-move? Why is it not applied to the remaining divs when they re-position themselves?
How do I get these divs to slide over instead of snapping?
The solution I've ended up using is to animate the width and opacity of the elements myself instead of using animate.css. As they shrink in size, the others slide into place. Looks weird with text, but works fine with images. No need for the ng-move class.
I have a list of items (each of which includes multiple elements) where each item is clickable and switches view. Is there a way to get the ripple effect on the whole md-item-content? I tried class="ripple" but that was not sufficient.
<md-content>
<md-list layout="column" md-padding>
<md-item ng-repeat="resto in list.data.recommendations">
<a ui-sref="resto({qname: resto.qname})" class="ripple">
<md-item-content id="resto{{$index}}">
...
If you want to use ripple effect on specific elements you can use md-ink-ripple.
<div md-ink-ripple></div>
Just add a md-ink-ripple directive and .md-clickable class to the <md-list-item> element:
<md-list-item md-ink-ripple class="md-clickable">
<p>Foo</p>
</md-list-item>
Also you can set the font-weight to 500 if you wish (that is how a default clickable-item looks like).
The other answers cover most of the cases but you can also customize the color of the ripple effect by using
<md-list-item md-ink-ripple="#03A9F4">
<p></p>
</md-list-item>
This will give a light blue ripple color.
The team behind Angular Material wanted to keep this internal and reduce customization which is why they haven't documented it well. However, I thought it was a useful customization. Hope it helps! Cheers!
Actually, there's lack of documentation over this.
I was searching for a solution and found your ask here, so I went to check their source code.
You can use md-list > md-list-item with several restrictions. In your case, the idea is to get close to their docs menu, on sidenav (theirs is a directive called menu-link, on the link itself), and I've acomplished with some modifications in my original code (which were close to yours):
<md-list>
<md-list-item
ng-repeat="section in ::admin.sections"
ng-class="{
'active': $state.includes(section.active),
'disabled': section.disabled
}"
ng-click="!section.disabled && $state.go(section.state)">
<span ng-bind="::section.label"></span>
</md-list-item>
</md-list>
Basically, isn't all elements that are accepted as action-triggers inside md-list-item. md-checkbox and md-switch are the only childs that are accepted to do a process, inside preLink function on md-list-item directive.
The other way is to put a ng-click on the md-list-item itself, or in a child element, inside it.
The preLink process is a wrapper, using a "non-styled" button that do a "proxy" on the click, and visually acomplishes the ripple effect.
Other things, like attributes, too, aren't being transferred to this "proxy", so a disabled cannot be used directly, you need to simulate its results. In my case, I interrupt the ng-click action, and put a class into the element.
I would suggest using md-button if you want ripples instead of the anchor. Then just do your ui-router state change in the controller.
See https://github.com/angular/material-start/blob/master/app/index.html#L30 for an example.
<md-list layout="column" md-padding>
<md-item ng-repeat="resto in list.data.recommendations">
<md-button ng-click="vm.navigateToResto(resto)" ng-class="{'selected' : it === vm.selected }" id="resto{{$index}}">
...
</md-button>
</md-item>
</md-list>
Here is the best way to do it:
<div md-ink-ripple class="ripple">Div like an md-button</div>
add to your div md-ink-ripple directive
add ripple class to your div:
`
.ripple {
position: relative;
&:active > .wave {
animation: ripple 0.25s;
}
.wave{
position:absolute;
width:100%;
height:100%;
background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
background-size: 0 0;
top:0;
left:0;
transform: scale(0);
opacity:0;
}
}
#keyframes ripple {
0% {transform: scaleX(0);}
50%{transform: scaleX(1);opacity:0.3;}
100%{transform: scaleX(1);opacity:0;background-size: 1000% 1000%;}
}
`
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.
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)
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 ;)
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
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
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
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 ;)
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)
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.