Skip to content

Commit

Permalink
animation: make g-fadein, g-fadeout animations
Browse files Browse the repository at this point in the history
  • Loading branch information
Yvonne Yip committed Apr 19, 2013
1 parent 016f0d8 commit 1569066
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 55 deletions.
12 changes: 12 additions & 0 deletions components/animation/g-fadein.html
View file
@@ -0,0 +1,12 @@
<link rel="import" href="g-animation.html">
<element name="g-fadein" extends="g-animation">
<script>
Toolkit.register(this, {
publish: {
properties: {
opacity: ["0", "1"]
}
}
});
</script>
</element>
12 changes: 12 additions & 0 deletions components/animation/g-fadeout.html
View file
@@ -0,0 +1,12 @@
<link rel="import" href="g-animation.html">
<element name="g-fadeout" extends="g-animation">
<script>
Toolkit.register(this, {
publish: {
properties: {
opacity: ["1", "0"]
}
}
});
</script>
</element>
113 changes: 58 additions & 55 deletions components/g-overlay-webanimations.html
View file
@@ -1,5 +1,8 @@
<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">
<element name="g-overlay-webanimations" extends="g-overlay">
<link rel="stylesheet" href="css/g-overlay.css">
<link rel="stylesheet" toolkit-scope="global" href="css/g-overlay-global.css">
Expand All @@ -11,61 +14,61 @@
}
}
</style>
<g-animation id="scale" duration="0.218" on-complete="completeOpening">
<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="opacity">
<g-keyframe value="0"></g-keyframe>
<g-keyframe value="1"></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-animation id="slideUp" duration="0.4">
<g-property name="opacity">
<g-keyframe value="1"></g-keyframe>
<g-keyframe value="0"></g-keyframe>
</g-property>
<g-property name="transform">
<g-keyframe value="translateY(0)"></g-keyframe>
<g-keyframe value="translateY(-100%)"></g-keyframe>
</g-property>
</g-animation>
<g-animation id="shakeFadeIn" 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="opacity">
<g-keyframe value="0"></g-keyframe>
<g-keyframe value="1"></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-animation id="shakeFadeOut" 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-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>
Expand Down
2 changes: 2 additions & 0 deletions workbench/overlay2.html
View file
Expand Up @@ -43,6 +43,7 @@
</head>
<body>
<button overlay="#dialog">Toggle Dialog</button>
<!--
( open styling:
<select onchange="changeOpening(event)">
<option>g-overlay-scale-slideup</option>
Expand All @@ -53,6 +54,7 @@
<label>modal: <input type="checkbox" onchange="modalChange(event)"></label>
<label>scrim: <input type="checkbox" onchange="scrimChange(event)"></label>
)
//-->
<br>
<g-overlay-webanimations id="dialog" animation="scale-slideup">
<h2>Dialog</h2>
Expand Down

0 comments on commit 1569066

Please sign in to comment.