chore: small changes

src/DevTools/DevTools.js

@@ -13,7 +13,8 @@ import {
   each,
   isNum,
   safeStorage,
-  $
+  $,
+  throttle
 } from '../lib/util'
 
 export default class DevTools extends Emitter {
@@ -243,6 +244,10 @@ export default class DevTools extends Emitter {
         $navBar.css('filter', 'brightness(1.2)')
       }, 1000)
     }
+    const setDisplaySize = throttle(
+      size => this.config.set('displaySize', size),
+      50
+    )
     const moveListener = e => {
       if (!this._isResizing) {
         return clearTimeout(this._resizeTimer)
@@ -260,7 +265,7 @@ export default class DevTools extends Emitter {
       } else if (displaySize > 100) {
         displaySize = 100
       }
-      this.config.set('displaySize', displaySize)
+      setDisplaySize(displaySize)
     }
     const endListener = () => {
       clearTimeout(this._resizeTimer)

src/DevTools/DevTools.scss

@@ -11,7 +11,7 @@
   z-index: 500;
   display: none;
   opacity: 0;
-  transition: opacity $anim-duration;
+  transition: opacity $anim-duration, height $anim-duration;
   .tools {
     @include overflow-auto();
     height: 100%;