Permalink
Browse files

animation: make g-fadein, g-fadeout animations

  • Loading branch information...
Yvonne Yip
Yvonne Yip committed Apr 19, 2013
1 parent 016f0d8 commit 1569066b09968b41678d35df1bf67a3d8634262a
@@ -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>
@@ -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>
@@ -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">
@@ -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>
View
@@ -43,6 +43,7 @@
</head>
<body>
<button overlay="#dialog">Toggle Dialog</button>
+ <!--
( open styling:
<select onchange="changeOpening(event)">
<option>g-overlay-scale-slideup</option>
@@ -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>

0 comments on commit 1569066

Please sign in to comment.