style(Cards): proper cards animation in-out

Alexays · Jul 17, 2018 · d847c75 · d847c75
1 parent 4ff8b54
commit d847c75
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 103 deletions.
diff --git a/src/components/Card/index.vue b/src/components/Card/index.vue
@@ -1,81 +1,85 @@
 <template>
-  <v-card :width="(options.size || 1) * 430 - 30" hover raised>
-    <v-toolbar
-      :color="theme ? 'elevation-0' : 'primary'"
-      :absolute="!!theme" class="head-drag" card prominent>
-      <v-layout :style="{ color: titleColor }" column wrap>
-        <v-toolbar-title v-if="!showSettings && title" :title="id">
-          {{ title }}
-        </v-toolbar-title>
-        <v-toolbar-title v-else>{{ id }}</v-toolbar-title>
-        <span v-if="showSettings" class="subheading">Settings</span>
-        <span v-else-if="subTitle" :title="subTitle" class="subheading">{{ subTitle }}</span>
-      </v-layout>
-      <v-spacer/>
-      <v-progress-circular
-        v-show="!loaded"
-        :title="`${id} is fetching some data...`"
-        :style="{ color: actionsColor }"
-        :size="25" :width="2" indeterminate/>
-      <v-btn
-        v-if="error"
-        :style="{ color: actionsColor }"
-        :title="`${error} click to reload`" flat icon @click="reload()">
-        <v-icon>warning</v-icon>
-      </v-btn>
-      <v-menu v-if="!showSettings" lazy bottom offset-y>
-        <v-btn slot="activator" :style="{ color: actionsColor }" flat icon>
-          <v-icon>more_vert</v-icon>
-        </v-btn>
-        <v-list>
-          <v-list-tile
-            v-for="action in actions"
-            :key="action.title"
-            :class="{ 'primary--text': action.active }" @click="action.func()">
-            <v-list-tile-title>{{ action.title }}</v-list-tile-title>
-          </v-list-tile>
-          <v-divider v-if="actions.length"/>
-          <v-list-tile v-if="cmp.settings" @click.stop="showSettings=true">
-            <v-list-tile-title>Settings</v-list-tile-title>
-          </v-list-tile>
-          <v-list-tile v-if="debug" @click="reload()">
-            <v-list-tile-title>Reload</v-list-tile-title>
-          </v-list-tile>
-          <v-list-tile @click="remove()">
-            <v-list-tile-title>Remove</v-list-tile-title>
-          </v-list-tile>
-        </v-list>
-      </v-menu>
-      <template v-else>
-        <v-btn flat icon color="foreground" title="Reset Settings" @click="resetSettings()">
-          <v-icon>settings_backup_restore</v-icon>
-        </v-btn>
-        <v-btn flat icon color="foreground" title="Cancel" @click="closeSettings(false)">
-          <v-icon>close</v-icon>
-        </v-btn>
-        <v-btn flat icon color="foreground" title="Save" @click="closeSettings(true)">
-          <v-icon>done</v-icon>
-        </v-btn>
-      </template>
-    </v-toolbar>
-    <component
-      v-init="id"
-      v-show="!showSettings"
-      :actions.sync="actions"
-      :cardtitle.sync="title"
-      :subtitle.sync="subTitle"
-      :settings="settings"
-      :is="cmp.card"
-      :key="hash"
-      @init="init"
-    />
-    <component
-      v-initSettings="settings"
-      v-if="showSettings && cmp.settings"
-      :is="cmp.settings"
-      :key="hash"
-    />
-  </v-card>
+  <div class="card" :style="{ width: `${(options.size || 1) * 430 - 30}px` }">
+    <transition name="fade" appear>
+      <v-card hover raised>
+        <v-toolbar
+          :color="theme ? 'elevation-0' : 'primary'"
+          :absolute="!!theme" class="head-drag" card prominent>
+          <v-layout :style="{ color: titleColor }" column wrap>
+            <v-toolbar-title v-if="!showSettings && title" :title="id">
+              {{ title }}
+            </v-toolbar-title>
+            <v-toolbar-title v-else>{{ id }}</v-toolbar-title>
+            <span v-if="showSettings" class="subheading">Settings</span>
+            <span v-else-if="subTitle" :title="subTitle" class="subheading">{{ subTitle }}</span>
+          </v-layout>
+          <v-spacer/>
+          <v-progress-circular
+            v-show="!loaded"
+            :title="`${id} is fetching some data...`"
+            :style="{ color: actionsColor }"
+            :size="25" :width="2" indeterminate/>
+          <v-btn
+            v-if="error"
+            :style="{ color: actionsColor }"
+            :title="`${error} click to reload`" flat icon @click="reload()">
+            <v-icon>warning</v-icon>
+          </v-btn>
+          <v-menu v-if="!showSettings" lazy bottom offset-y>
+            <v-btn slot="activator" :style="{ color: actionsColor }" flat icon>
+              <v-icon>more_vert</v-icon>
+            </v-btn>
+            <v-list>
+              <v-list-tile
+                v-for="action in actions"
+                :key="action.title"
+                :class="{ 'primary--text': action.active }" @click="action.func()">
+                <v-list-tile-title>{{ action.title }}</v-list-tile-title>
+              </v-list-tile>
+              <v-divider v-if="actions.length"/>
+              <v-list-tile v-if="cmp.settings" @click.stop="showSettings=true">
+                <v-list-tile-title>Settings</v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile v-if="debug" @click="reload()">
+                <v-list-tile-title>Reload</v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile @click="remove()">
+                <v-list-tile-title>Remove</v-list-tile-title>
+              </v-list-tile>
+            </v-list>
+          </v-menu>
+          <template v-else>
+            <v-btn flat icon color="foreground" title="Reset Settings" @click="resetSettings()">
+              <v-icon>settings_backup_restore</v-icon>
+            </v-btn>
+            <v-btn flat icon color="foreground" title="Cancel" @click="closeSettings(false)">
+              <v-icon>close</v-icon>
+            </v-btn>
+            <v-btn flat icon color="foreground" title="Save" @click="closeSettings(true)">
+              <v-icon>done</v-icon>
+            </v-btn>
+          </template>
+        </v-toolbar>
+        <component
+          v-init="id"
+          v-show="!showSettings"
+          :actions.sync="actions"
+          :cardtitle.sync="title"
+          :subtitle.sync="subTitle"
+          :settings="settings"
+          :is="cmp.card"
+          :key="hash"
+          @init="init"
+        />
+        <component
+          v-initSettings="settings"
+          v-if="showSettings && cmp.settings"
+          :is="cmp.settings"
+          :key="hash"
+        />
+      </v-card>
+    </transition>
+  </div>
 </template>
 <script src="./main.js"></script>
 <style lang="scss" rel='stylesheet/scss' src="./style.scss" scoped></style>
diff --git a/src/components/Card/style.scss b/src/components/Card/style.scss
@@ -1,22 +1,24 @@
-.v-card {
-  width: 400px;
+.card {
+  min-width: 400px;
   min-height: 100px;
   margin: 15px;
   position: absolute;
-  overflow-x: hidden;
-  .v-toolbar__title {
-    font-weight: normal;
-  }
-  .v-toolbar--absolute {
-    background-color: transparent!important;
-  }
-  .subheading {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .head-drag {
-    cursor: grab;
+  .v-card {
+    overflow-x: hidden;
+    .v-toolbar__title {
+      font-weight: normal;
+    }
+    .v-toolbar--absolute {
+      background-color: transparent!important;
+    }
+    .subheading {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .head-drag {
+      cursor: grab;
+    }
   }
 }
 
@@ -36,3 +38,10 @@
 .muuri-item-hidden {
   z-index: 0 !important;
 }
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
diff --git a/src/components/Home/index.vue b/src/components/Home/index.vue
@@ -16,14 +16,13 @@
         </v-btn>
       </v-speed-dial>
     </transition>
-    <transition-group
+    <div
       id="card-container"
-      :class="{ 'design-toolbar': $store.state.settings.header.design === 'toolbar' }"
-      name="fade-transition" tag="div" appear>
+      :class="{ 'has-toolbar': $store.state.settings.header.design === 'toolbar' }">
       <card
         v-resize="onResize"
         v-for="card in cards" :key="card" :id="card" :data-id="card" @deleted="delCard(card)"/>
-    </transition-group>
+    </div>
     <div v-if="emptyCards" class="text-xs-center">
       <v-icon x-large>grid_off</v-icon>
       <h2 class="subheading">You have no cards.</h2>

diff --git a/src/components/Home/main.js b/src/components/Home/main.js
@@ -72,11 +72,14 @@ export default {
     },
     delCard(key) {
       const elem = document.querySelector(`[data-id='${key}']`);
-      this.grid.hide(elem);
-      this.$ga.event('cards', 'delete', key, 0);
-      this.$store.commit('DEL_CARD_SETTINGS', key);
-      this.$store.commit('DEL_CARD_CACHE', key);
-      this.$store.commit('DEL_CARD', key);
+      this.grid.hide(elem, {
+        onFinish: () => {
+          this.$ga.event('cards', 'delete', key, 0);
+          this.$store.commit('DEL_CARD_SETTINGS', key);
+          this.$store.commit('DEL_CARD_CACHE', key);
+          this.$store.commit('DEL_CARD', key);
+        },
+      });
     },
     addCard(key) {
       this.$store.commit(key === 'Changelog' ? 'ADD_CARD_FIRST' : 'ADD_CARD', key);

diff --git a/src/components/Home/style.scss b/src/components/Home/style.scss
@@ -8,7 +8,7 @@
   #card-container {
     position: relative;
     margin: 20px auto;
-    &.design-toolbar {
+    &.has-toolbar {
       margin: 35px auto;
     }
   }