The scrollbar in sky-scrollable should fade in and out

sky/framework/sky-scrollable.sky

 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
 <import src="/sky/framework/fling-curve.sky" as="FlingCurve" />
 
 <sky-element
   name="sky-scrollable"
@@ skipping 13 matching lines @@
     transform: translateY(0);
   }
   #vbar {
     position: absolute;
     right: 0;
     width: 3px;
     background-color: lightgray;
     pointer-events: none;
     top: 0;
     height: 0;
+    will-change: opacity;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
   }
   </style>
-  <div id="vbar" />
   <div id="scrollable">
     <content />
   </div>
+  <div id="vbar" />
 </template>
 <script>
 module.exports = class extends SkyElement {
   created() {
     this.scrollable_ = null;
     this.vbar_ = null;
     this.scrollOffset_ = 0;
     this.flingCurve_ = null;
     this.flingAnimationId_ = null;
   }
@@ skipping 32 matching lines @@
   }
 
   scheduleFlingUpdate_() {
     this.flingAnimationId_ = requestAnimationFrame(this.updateFling_.bind(this));
   }
 
   stopFling_() {
     cancelAnimationFrame(this.flingAnimationId_);
     this.flingCurve_ = null;
     this.flingAnimationId_ = null;
+    this.vbar_.style.opacity = 0;
   }
 
   updateFling_(timeStamp) {
     var scrollDelta = this.flingCurve_.update(timeStamp);
     if (!scrollDelta || !this.scrollBy(scrollDelta))
       return this.stopFling_();
     this.scheduleFlingUpdate_();
   }
 
   handleScrollStart_(event) {
+    this.vbar_.style.opacity = 1;
   }
 
   handleScrollEnd_(event) {
+    this.vbar_.style.opacity = 0;
   }
 
   handleScrollUpdate_(event) {
     this.scrollBy(-event.dy);
   }
 
   handleFlingStart_(event) {
     this.flingCurve_ = new FlingCurve(-event.velocityY, event.timeStamp);
     this.scheduleFlingUpdate_();
   }
 
   handleFlingCancel_(event) {
     this.stopFling_();
   }
 
   handleWheel_(event) {
     this.scrollBy(-event.offsetY);
   }
 }.register();
 </script>
 </sky-element>