feat(ui): better item logo animation

posrix · Jun 15, 2018 · 22b92ba · 22b92ba
1 parent e6c7546
commit 22b92ba
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/packages/@vue/cli-ui/src/components/ItemLogo.vue b/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

diff --git a/packages/@vue/cli-ui/src/components/SuggestionBarItem.vue b/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
 

diff --git a/packages/@vue/cli-ui/src/style/vars.styl b/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)