zwacky / angular-flippy Goto Github PK

AngularJS directive implementation with a CSS3 flip animation

License: MIT License

JavaScript 63.21% CSS 36.79%

angular-flippy's Introduction

# 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

Try the demo here: http://output.jsbin.com/panizijuka
Clone the repo and gulp watch to start the demo page locally

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!

angular-flippy's People

Contributors

Stargazers

Watchers

angular-flippy's Issues

When I set overflow: auto for flippy-front it shows in the Flippy back in reverse

I set

flippy-front{
overflow: auto;
}

The flippy-front content is shown in the flippy-back area in reverse along with flippy-back content in Google Chrome web browser.

Angular 2?

Will this module be migrated to Angular 2?

I am installing angular-flippy with "bower install angular-flippy --save" (just like all other modules) but after "gulp serve" it doesn't include in my index file (All bower modules are just there except this one).

Suggestion: Play with CSS pointer events could allow for directive to be triggered by inner elements

Here's a Codepen based on your original codepen, that describes how you can use CSS pointer-events to make the flip triggered by children elements instead of the element itself.
http://codepen.io/bonatoc/pen/XXXwQq

The pen is self-explanatory, it only consists of children containers with pointer-events:auto, and a pointer-events:none; override on the element.

I think it's interesting to be able to trigger a function while not flipping the main container, because it could be combined with ui-router and load a 3rd, a 4th (etc) view before the flip happens.

In a multi-step form, you expect the container to flip only when the 'next' button is pressed. Or upon whatever user interaction.

iOS behaviour broken

Thanks for a nice effect, it's especially useful for responsive applications. As you can make lots of information available on small screen without overloading.

Though there is a strange behaviour I didn't investigate on iOS:

first touch: start flip and instantly return.
second touch: flip as expected
touch on any other "flip"-element: flip back previously flipped

Flip using an element

I don't know neither found any documentation if angular-flippy flip on click a specific element rather than complete flip. For example I want to bind flip-front to a button Register and flip-back to a button called login.

Flippy element height

Simon,
I have potentially the same problem described here #4 but I believe it should be addressed separately.
The problem is that the Flippy element has zero/inherited height once rendered. All the content is overflowing. It works fine once there is only one in an empty fix height div or body. In more dynamic environment the next HTML element is hidden behind the topmost current flippy content (z-index change had no effect).
The only solution I was able to figure out in one day was to measure the front and back real height and force directive (link function) to propagate those numbers (height of the content) to the parent div.
Is there a any better (more CSS) solution?

Trying to push branch for pull request

I had some contributions and tried to create a pull request but your repository is not letting me push my branch.

Flip effect does not work on Internet Explorer 11

Hi, I'm trying to using your flip effect, but when I test it with internet explorer 11.0.21 the effect is not completed.

I attach a print screen

Multiple Flippie's on page they overlap

Hi was just giving your fine work a test drive, and found that
If you put more then one on a page they all stack on top of each other.

Merge PRs to fix your bower mainfile

#10 or #9

Thanks!

Custom Method for flippy with unique id

I am trying to implement the flippy directive in an ng-repeat like so

https://drive.google.com/open?id=0BxB-19VLAr8STWdIWjF1MjBsaEk

I want to display a list of flippys and that is working as expected. I also want to be able to flip each flippy independently of eachother, and I am guessing I can do that with custom events somehow. I have a Save button in each flippy like above that calls a method that taps into broadcast

vm.saveObjective = function (id) { $rootScope.$broadcast(id); return ""; }

The issue I am running into is that flippy runs before the browser is populated, which makes the code in the flippy directive just get the variable name instead of the variable value when it ties up the event. Without modifying the directive, is there a way to do what I want?

Trigger flip with ngSwipeLeft / ngSwipeRight

I'm interested in using this script on a touchscreen device and trigger the flip using ngTouch events. I'd also like the filp to read the swipe direction and flip accordingly.

I tried including this into the flip attribute but it's not recognizing the swipe (ngTouch is installed)

flip="['click', 'ngSwipeLeft', 'ng-swipe-right']"

Any ideas?

Thanks
Alan

Canvas Image

I am trying to load image from Canvas on back side of flip image but as you know canvas takes time to render image , so the back side is turning to be blank. Any suggestions to delay the flip or load flip only when image is loaded?

In Firefox flippy-front part does not render correctly

There is an issue in rendering flippy-front part for the very first request. After that, it does work fine.