Open Artur- opened 8 years ago
I think I know exactly why this is happening, I'll fix it today.
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?
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>
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.
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