AngularJS directive implementation with a CSS3 flip animation
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
js/src
less
.gitignore
.jshintrc
LICENSE
README.md
bower.json
gulpfile.js
package.json

README.md

# angular-flippy

AngularJS directive implementation with a CSS3 flip animation.

With v2.0 you'll find more customization within the directive itself. You are free to hook into any events like ng-click to fire the flip event.

## Demo

Install

  • npm: npm install angular-flippy
  • bower: bower install angular-flippy
  • add angular-flippy to your angular.module('your-webapp', ['angular-flippy', ...) dependencies

## Flippy Directive Parameters

<flippy
  class="fancy"
  flip="['click', 'mouseenter']"
  flip-back="['click', 'mouseleave']"
  duration="800"
  timing-function="ease-in-out">
</flippy>
  • class: fancy is an optional class to show some 3D-ness. (include ./css/flippy-fancy.min.css for this exemplary style)
  • flip: events that trigger the first flip. will only trigger if flip state is in opposite flip state.
  • flip-back: events that trigger the flip back. will only trigger if flip state is in opposite flip state.
  • duration: the time it takes to flip in ms
  • timing-function: timing functions (see https://developer.mozilla.org/de/docs/Web/CSS/transition-timing-function)

## Events

There are two types of events accepted for the flip (first flip) and flip-back (flip back):

  • Every DOM event e.g. click, mouseenter, mouseleave, dblclick, ...
  • custom:XXX where XXX is the name of the broadcast event

Custom Events Example

// somewhere in your webapp
function buttonClicked() {
    $rootScope.$broadcast('FLIP_EVENT_IN');
}

// your directive
<flippy
    flip="['custom:FLIP_EVENT_IN']"
    flip-back="['custom:FLIP_EVENT_OUT']"
    duration="800"
    timing-function="ease-in-out">
</flippy>

Contribute

Just use gulp watch and hack away!