feat(ui): better item logo animation

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/ItemLogo.vue

@@ -115,6 +115,7 @@ export default {
       width 100%
       height @width
       transform scale(0)
+      border-radius 50%
     .vue-ui-icon
       width 24px
       height @width
@@ -145,13 +146,13 @@ export default {
 
   &.loaded
     .image
-      animation zoom .1s
+      animation zoom .5s $ease
       transform none
 
   &.selected,
   &.error
     .wrapper
-      animation zoom .1s
+      animation zoom .5s $ease
 
   &.selected
     .wrapper

packages/@vue/cli-ui/src/components/SuggestionBarItem.vue

@@ -137,9 +137,9 @@ export default {
 
 .suggestion-enter-active,
 .suggestion-leave-active
-  transition all 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000)
+  transition all 1.5s $ease
   >>> .vue-ui-button
-    transition all 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000)
+    transition all 1.5s $ease
     .content
       transition all .2s
 

packages/@vue/cli-ui/src/style/vars.styl

@@ -1,2 +1,3 @@
 $padding-item = 16px
 $font-mono = 'Roboto Mono', monospace
+$ease = cubic-bezier(0.075, 0.820, 0.165, 1.000)