feat(anim): adds staggering animations

This adds staggering animations to the flickr gallery example
aurelia · May 4, 2015 · 5324e13 · 5324e13
1 parent 996407d
commit 5324e13
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/flickr.html b/src/flickr.html
@@ -1,7 +1,7 @@
 <template>
   <section>
       <h2>${heading}</h2>
-      <div class="row">
+      <div class="row au-stagger">
         <div class="col-sm-6 col-md-3 flickr-img au-animate" repeat.for="image of images">
           <a class="thumbnail">
             <img src.bind="image.media.m"/>

diff --git a/styles/styles.css b/styles/styles.css
@@ -52,7 +52,18 @@ section.au-enter-active {
 }
 
 /* animate flickr image entry */
+div.au-stagger {
+  /* 200ms will be applied between each successive enter operation */
+  -webkit-animation-delay:100ms;
+  animation-delay:100ms;
+}
+
+.flickr-img.au-enter {
+  opacity: 0!important;
+}
+
 .flickr-img.au-enter-active {
+  opacity: 1!important;
   -webkit-animation: bounce 1s;
   animation: bounce 1s;
 }