mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-05 15:32:55 +02:00
111 lines
4.1 KiB
HTML
111 lines
4.1 KiB
HTML
<link rel="import" href="g-overlay.html">
|
|
<link rel="import" href="animation/g-animation.html">
|
|
<link rel="import" href="animation/g-animation-group.html">
|
|
<link rel="import" href="animation/g-fadein.html">
|
|
<link rel="import" href="animation/g-fadeout.html">
|
|
<polymer-element name="g-overlay-webanimations" extends="g-overlay">
|
|
<link rel="stylesheet" href="css/g-overlay.css">
|
|
<link rel="stylesheet" polymer-scope="global" href="css/g-overlay-global.css">
|
|
<template>
|
|
<style>
|
|
@host {
|
|
.revealed {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
<g-animation-group id="scale" duration="0.218" on-complete="completeOpening">
|
|
<g-animation duration="0.218">
|
|
<g-property name="transform">
|
|
<g-keyframe value="scale(1.05)"></g-keyframe>
|
|
<g-keyframe value="scale(1.0)"></g-keyframe>
|
|
</g-property>
|
|
<g-property name="visibility">
|
|
<g-keyframe value="hidden"></g-keyframe>
|
|
<g-keyframe value="visible"></g-keyframe>
|
|
</g-property>
|
|
</g-animation>
|
|
<g-fadein duration="0.218"></g-fadein>
|
|
</g-animation-group>
|
|
<g-animation-group id="slideUp" duration="0.4">
|
|
<g-animation duration="0.4">
|
|
<g-property name="transform">
|
|
<g-keyframe value="translateY(0)"></g-keyframe>
|
|
<g-keyframe value="translateY(-100%)"></g-keyframe>
|
|
</g-property>
|
|
</g-animation>
|
|
<g-fadeout duration="0.4"></g-fadeout>
|
|
</g-animation-group>
|
|
<g-animation-group id="shakeFadeIn" duration="0.5">
|
|
<g-animation duration="0.5">
|
|
<g-property name="transform">
|
|
<g-keyframe offset="0" value="translateX(0)"></g-keyframe>
|
|
<g-keyframe offset="0.1" value="translateX(-50px)"></g-keyframe>
|
|
<g-keyframe offset="0.3" value="translateX(50px)"></g-keyframe>
|
|
<g-keyframe offset="0.5" value="translateX(-25px)"></g-keyframe>
|
|
<g-keyframe offset="0.7" value="translateX(25px)"></g-keyframe>
|
|
<g-keyframe offset="0.9" value="translateX(-13px)"></g-keyframe>
|
|
<g-keyframe offset="1" value="translateX(0)"></g-keyframe>
|
|
</g-property>
|
|
<g-property name="visibility">
|
|
<g-keyframe value="hidden"></g-keyframe>
|
|
<g-keyframe value="visible"></g-keyframe>
|
|
</g-property>
|
|
</g-animation>
|
|
<g-fadein duration="0.5"></g-fadein>
|
|
</g-animation-group>
|
|
<g-animation-group id="shakeFadeOut" duration="0.5">
|
|
<g-animation duration="0.5">
|
|
<g-property name="transform">
|
|
<g-keyframe offset="0" value="translateX(0)"></g-keyframe>
|
|
<g-keyframe offset="0.1" value="translateX(-50px)"></g-keyframe>
|
|
<g-keyframe offset="0.3" value="translateX(50px)"></g-keyframe>
|
|
<g-keyframe offset="1" value="translateX(-100%)"></g-keyframe>
|
|
</g-property>
|
|
<g-property name="opacity">
|
|
<g-keyframe value="1"></g-keyframe>
|
|
<g-keyframe value="0"></g-keyframe>
|
|
</g-property>
|
|
</g-animation>
|
|
<g-fadeout duration="0.5"></g-fadeout>
|
|
</g-animation-group>
|
|
<content></content>
|
|
</template>
|
|
<script>
|
|
Polymer('g-overlay-webanimations', {
|
|
publish: {
|
|
animation: 'scale-slideup'
|
|
},
|
|
ready: function() {
|
|
this.$.scale.target = this;
|
|
this.$.slideUp.target = this;
|
|
this.$.shakeFadeIn.target = this;
|
|
this.$.shakeFadeOut.target = this;
|
|
this.animationChanged();
|
|
},
|
|
animationChanged: function() {
|
|
if (this.animation == 'scale-slideup') {
|
|
this.openAnimation = this.$.scale;
|
|
this.closeAnimation = this.$.slideUp;
|
|
} else if (this.animation == 'shake') {
|
|
this.openAnimation = this.$.shakeFadeIn;
|
|
this.closeAnimation = this.$.shakeFadeOut;
|
|
}
|
|
},
|
|
renderOpened: function() {
|
|
this.classList.add('revealed');
|
|
if (this.opened) {
|
|
this.openAnimation.play();
|
|
} else {
|
|
this.closeAnimation.play();
|
|
}
|
|
},
|
|
openedAnimationStart: function(e) {
|
|
},
|
|
openedAnimationEnd: function(e) {
|
|
},
|
|
openedTransitionEnd: function(e) {
|
|
}
|
|
});
|
|
</script>
|
|
</polymer-element>
|