search

x-tag / flipbox

Flipbox acts like a playing card that has a front and back and allows you to "flip" between the sides.
26 stars 11 forks source link

A flipEnd event is sent whenever an animation inside the flipbox completes #4

Open Artur- opened 8 years ago

Artur- commented 8 years ago

If you add e.g. a <paper-button> from Polymer inside a flipbox, you will get an flipEnd event every time the paper-button ripple animation or shadow animation ends

csuwildcat commented 8 years ago

I think I know exactly why this is happening, I'll fix it today.

csuwildcat commented 8 years ago

Just looked at the code, and it should be doing what it needs to do to filter out only the transitions that are coming from the two flip elements in the x-flipbox: https://github.com/x-tag/flipbox/blob/master/src/flipbox.js#L20-L27.

Can you include the source you're working with or a demo of the issue?

Artur- commented 8 years ago

Tested using something like

<!doctype html>
<html>
<head>
  <script src="https://rawgit.com/x-tag/flipbox/master/demo/x-tag-components.js"></script>
  <script src="https://rawgit.com/x-tag/flipbox/master/src/flipbox.js"></script>
  <link rel="stylesheet" href="https://rawgit.com/x-tag/flipbox/master/src/flipbox.css"></link>
  <link rel="import" href="https://rawgit.com/Download/polymer-cdn/master/lib/paper-button/paper-button.html"></link>
</head>

<body>
<x-flipbox style="width: 200px;height:200px;">
  <div>Front <paper-button raised>Flip</paper-button></div>
  <span>Back</span>
</x-flipbox>
</body>
<script>
var flipbox = document.querySelector("x-flipbox");
xtag.addEvent(flipbox, 'flipend', function(event){
  window.console.log("Flipend");
});
</script>
</html>
csuwildcat commented 8 years ago

What I am wondering is if Polymer's button element (or your own CSS) is doing something to the flip face <div> element you've placed the button in. The x-flipbox code is filtering to make sure that it only fires flipend when a transition completes on one of its direct children, the flip faces, as indicated on line 24:

if (this.parentNode == flipBox) ...

If Polymer's button element or your own CSS is overriding or adding some sort of other transition to one of the face elements, it will result in a transitionend event, which flipbox will interpret as a flip, and fire flipend.

Does this make sense? Can you see if that is what is causing the issue? If not, I will continue thinking of what is. If worst comes to worst, I can add some sort of temporary attribute to the element when it is known to be flipping (from looking at the flip state) which will add another layer of protection to the event analysis.