Begin work on the PopupMenu entrance animation

sky/framework/components/popup_menu.dart

Index: sky/framework/components/popup_menu.dart
diff --git a/sky/framework/components/popup_menu.dart b/sky/framework/components/popup_menu.dart
index 8ed4e6c0b4e10967d85b885424371792b8740c9a..9d9d7a8e513211c7545447e4f2646e5c857c7b5a 100644
--- a/sky/framework/components/popup_menu.dart
+++ b/sky/framework/components/popup_menu.dart
@@ -2,11 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../animation/animated_value.dart';
 import '../fn.dart';
 import '../theme/colors.dart';
 import 'material.dart';
 import 'popup_menu_item.dart';
 
+const double _kItemInitialOpacity = 0.0;
+const double _kItemFinalOpacity = 1.0;
+const double _kItemFadeDuration = 500.0;
+const double _kItemFadeDelay = 200.0;
+
 class PopupMenu extends Component {
   static final Style _style = new Style('''
     border-radius: 2px;
@@ -16,14 +22,30 @@ class PopupMenu extends Component {
 
   List<List<Node>> items;
   int level;
+  List<AnimatedValue> _opacities;
+
+  PopupMenu({ Object key, this.items, this.level }) : super(key: key) {
+    _opacities = new List.from(items.map(
+        (item) => new AnimatedValue(_kItemInitialOpacity)));
+  }
 
-  PopupMenu({ Object key, this.items, this.level }) : super(key: key);
+  // TODO(abarth): Rather than using didMount, we should have the parent
+  // component kick off these animations.
+  void didMount() {
+    int i = 0;
+    _opacities.forEach((opacity) {
+      opacity.animateTo(_kItemFinalOpacity, _kItemFadeDuration,
+                        initialDelay: _kItemFadeDelay * i++);
+    });
+  }
 
   Node build() {
     List<Node> children = [];
     int i = 0;
     items.forEach((List<Node> item) {
-      children.add(new PopupMenuItem(key: i++, children: item));
+      children.add(
+          new PopupMenuItem(key: i, children: item, opacity: _opacities[i]));
+      ++i;
     });
 
     return new Material(