Added: transition for gallery handle-bar

src/renderer/components/SettingView/Gallery.vue

@@ -1,32 +1,38 @@
 <template>
   <div id="gallery-view">
     <div class="view-title">
-      相册 - {{ filterList.length }}
+      相册 - {{ filterList.length }} <i class="el-icon-caret-bottom" @click="toggleHandleBar" :class="{'active': handleBarActive}"></i>
     </div>
-    <el-row class="gallery-list">
+    <transition name="el-zoom-in-center">
+      <el-row v-show="handleBarActive">
+        <el-col :span="20" :offset="2" :class="{ 'long-list': filterList.length > 4 }">
+          <el-row class="handle-bar" :gutter="16">
+            <el-col :span="6" v-for="item in $picBed" :key="item.type">
+              <div class="pic-bed-item" @click="choosePicBed(item.type)" :class="{active: choosedPicBed.indexOf(item.type) !== -1}">
+                {{ item.name }}
+              </div>
+            </el-col>
+          </el-row>
+          <el-row class="handle-bar" :gutter="16">
+            <el-col :span="12">
+              <el-input placeholder="搜索" size="mini" v-model="searchText"></el-input>
+            </el-col>
+            <el-col :span="6">
+              <div class="item-base" @click="cleanSearch">
+                清空搜索
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div class="item-base delete" :class="{ active: isMultiple(choosedList)}" @click="multiDelete">
+                <i class="el-icon-delete"></i> 批量删除
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </transition>
+    <el-row class="gallery-list" :class="{ small: handleBarActive }">
       <el-col :span="20" :offset="2">
-        <el-row class="handle-bar" :gutter="16">
-          <el-col :span="6" v-for="item in $picBed" :key="item.type">
-            <div class="pic-bed-item" @click="choosePicBed(item.type)" :class="{active: choosedPicBed.indexOf(item.type) !== -1}">
-              {{ item.name }}
-            </div>
-          </el-col>
-        </el-row>
-        <el-row class="handle-bar" :gutter="16">
-          <el-col :span="12">
-            <el-input placeholder="搜索" size="mini" v-model="searchText"></el-input>
-          </el-col>
-          <el-col :span="6">
-            <div class="item-base" @click="cleanSearch">
-              清空搜索
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="item-base delete" :class="{ active: isMultiple(choosedList)}" @click="multiDelete">
-              <i class="el-icon-delete"></i> 批量删除
-            </div>
-          </el-col>
-        </el-row>
         <el-row :gutter="16">
           <gallerys
             :images="images"
@@ -45,7 +51,7 @@
               <i class="el-icon-document" @click="copy(item.imgUrl)"></i>
               <i class="el-icon-edit-outline" @click="openDialog(item)"></i>
               <i class="el-icon-delete" @click="remove(item.id)"></i>
-              <el-checkbox v-model="choosedList[item.id]" class="pull-right"></el-checkbox>
+              <el-checkbox v-model="choosedList[item.id]" class="pull-right" @change=" handleBarActive = true"></el-checkbox>
             </div> 
           </el-col>
         </el-row>
@@ -89,7 +95,8 @@ export default {
       },
       choosedList: {},
       choosedPicBed: [],
-      searchText: ''
+      searchText: '',
+      handleBarActive: false
     }
   },
   created () {
@@ -231,6 +238,9 @@ export default {
           return true
         })
       }
+    },
+    toggleHandleBar () {
+      this.handleBarActive = !this.handleBarActive
     }
   }
 }
@@ -243,6 +253,11 @@ export default {
   margin 10px auto
   .sub-title
     font-size 14px
+  .el-icon-caret-bottom
+    cursor: pointer
+    transition all .2s ease-in-out
+    &.active
+      transform: rotate(180deg)
 .item-base
   background #2E2E2E
   text-align center
@@ -258,7 +273,10 @@ export default {
     cursor pointer
     background #F15140
     color #fff
+.long-list
+  width: calc(83.3333333% - 6px)
 #gallery-view
+  position relative
   .pull-right
     float right
   .gallery-list
@@ -267,6 +285,12 @@ export default {
     padding 8px 0
     overflow-y auto
     overflow-x hidden
+    position absolute
+    top: 38px
+    transition all .2s ease-in-out .1s
+    &.small
+      height: 245px
+      top: 152px
     &__img
       height 150px
       position relative

yarn.lock

@@ -392,8 +392,8 @@ async-exit-hook@^2.0.1:
   resolved "https://registry.yarnpkg.com/async-exit-hook/-/async-exit-hook-2.0.1.tgz#8bd8b024b0ec9b1c01cccb9af9db29bd717dfaf3"
 
 async-validator@~1.8.1:
-  version "1.8.1"
+  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.1.tgz#6665788ca39269af770e5ee02f0e557f2438d2ca"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.2.tgz#b77597226e96242f8d531c0d46ae295f62422ba4"
   dependencies:
     babel-runtime "6.x"
 
@@ -671,8 +671,8 @@ babel-helper-to-multiple-sequence-expressions@^0.2.0:
   resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.2.0.tgz#d1a419634c6cb301f27858c659167cfee0a9d318"
 
 babel-helper-vue-jsx-merge-props@^2.0.0:
-  version "2.0.2"
+  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.2.tgz#aceb1c373588279e2755ea1cfd35c22394fd33f8"
+  resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
 
 babel-helpers@^6.24.1:
   version "6.24.1"
@@ -2290,10 +2290,14 @@ copy-webpack-plugin@^4.0.1:
     minimatch "^3.0.4"
     node-dir "^0.1.10"
 
-core-js@^2.2.0, core-js@^2.4.0, core-js@^2.5.0:
+core-js@^2.2.0, core-js@^2.5.0:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
 
+core-js@^2.4.0:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
+
 core-util-is@1.0.2, core-util-is@^1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -3073,12 +3077,14 @@ electron@^1.7.5:
     extract-zip "^1.0.3"
 
 element-ui@^2.0.5:
-  version "2.0.5"
+  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.0.5.tgz#e001cb3514d8303a54f2b7d893b916acfc9ac57d"
+  resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.4.3.tgz#17a09ba6332b17a90002d86070697dcdb88fe0a5"
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
     deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
     throttle-debounce "^1.0.1"
 
 elliptic@^6.0.0:
@@ -5835,6 +5841,10 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+
 npm-install-package@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/npm-install-package/-/npm-install-package-2.1.0.tgz#d7efe3cfcd7ab00614b896ea53119dc9ab259125"
@@ -7045,8 +7055,8 @@ regenerator-runtime@^0.10.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
 
 regenerator-runtime@^0.11.0:
-  version "0.11.0"
+  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
 regenerator-transform@^0.10.0:
   version "0.10.1"
@@ -7233,6 +7243,10 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -8041,8 +8055,8 @@ thenify-all@^1.0.0:
     any-promise "^1.0.0"
 
 throttle-debounce@^1.0.1:
-  version "1.0.1"
+  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
 
 throttleit@0.0.2:
   version "0.0.2"