Skip to content

Instantly share code, notes, and snippets.

@sorvell

sorvell/gist:6980699

Created October 14, 2013 19:26
Show Gist options
  • Save sorvell/6980699 to your computer and use it in GitHub Desktop.
Save sorvell/6980699 to your computer and use it in GitHub Desktop.
Download ZIP
Play animation in WebComponentsReady needs timeout
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-animation-group.html">
</head>
<body>
<polymer-element name="transition-hslide-scale-out" extends="polymer-animation-group" noscript>
<template>
<polymer-animation id="scale-out" duration="0.5">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="scale(1)"></polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="scale(0.8)"></polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<polymer-animation id="hslide-in" duration="0.5">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="translateX(100%)"></polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="translateX(0)"></polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
</template>
</polymer-element>
<transition-hslide-scale-out></transition-hslide-scale-out>
<div>Hi!</div>
<script>
document.addEventListener('WebComponentsReady', function() {
var a = document.querySelector('transition-hslide-scale-out');
a.target = document.querySelector('div');
setTimeout(function() {
a.play();
}, 50);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment