Add animations for button text.

stephen304 · Jan 25, 2015 · 746a60c · 746a60c
1 parent 37560b5
commit 746a60c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/web/app/styles/main.css b/web/app/styles/main.css
@@ -19,3 +19,32 @@ input[type="file"] > input[type="button"]::-moz-focus-inner {
     border: 0;
     outline : 0;
 }
+
+/* Slide down transition animations */
+.animate-slide-container {
+  position:relative;
+  height:43px;
+  overflow:hidden;
+}
+.animate-slide {
+  padding:10px;
+}
+.animate-slide.ng-animate {
+  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+}
+.animate-slide.ng-enter {
+  top:-50px;
+}
+.animate-slide.ng-leave.ng-leave-active {
+  top:50px;
+}
+.animate-slide.ng-leave,
+.animate-slide.ng-enter.ng-enter-active {
+  top:0;
+}
diff --git a/web/app/views/torrent.html b/web/app/views/torrent.html
@@ -35,7 +35,10 @@ <h4>Tracker Stats</h4>
           <span class="label label-default pull-right" am-time-ago="torrent.Lastmod"></span>
         </li>
       </ul>
-      <a ng-click="refresh()" class="btn btn-info" style="width: 100%;" ng-class="{disabled: refreshing}" ng-switch="refreshing"><span ng-switch-when="true"><i class="fa fa-refresh fa-spin"></i></span><span ng-switch-default="">Refresh Trackers</span></a>
+      <a ng-click="refresh()" class="btn btn-info animate-slide-container" style="width: 100%;" ng-class="{disabled: refreshing}" ng-switch="refreshing">
+        <span ng-switch-when="true" class="animate-slide"><i class="fa fa-refresh fa-spin"></i></span>
+        <span ng-switch-default="" class="animate-slide">Refresh Trackers</span>
+      </a>
     </div>
   </div>
   <div class="row">