add favorite effect

package-lock.json

@@ -166,6 +166,11 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "animate.css": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.6.1.tgz",
+      "integrity": "sha512-xEIzzKyQvQSIldgrtC2d/qptAEQLVlMb6xQrjQ6HU6NyGhF7LAIivRZVmhSAg4EICRASNiS+A1G+wvAKTCoC7A=="
+    },
     "ansi-align": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",

package.json

@@ -83,6 +83,7 @@
   },
   "dependencies": {
     "about-window": "^1.11.0",
+    "animate.css": "^3.6.1",
     "axios": "^0.18.0",
     "electron-json-storage": "^4.0.2",
     "electron-log": "^2.2.14",

src/renderer/App.vue

@@ -84,3 +84,4 @@ p {
   clear:both;
 }
 </style>
+<style src="animate.css/animate.min.css"></style>

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

@@ -36,7 +36,7 @@
         <el-button type="text" @click="changeReblog(originalMessage(message))" :class="originalMessage(message).reblogged ? 'reblogged' : 'reblog'">
           <icon name="retweet" scale="0.9"></icon>
         </el-button>
-        <el-button type="text" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited' : 'favourite'">
+        <el-button type="text" @click="changeFavourite(originalMessage(message))" :class="originalMessage(message).favourited ? 'favourited animated bounceIn' : 'favourite'">
           <icon name="star" scale="0.9"></icon>
         </el-button>
         <popper trigger="click" :options="{placement: 'bottom'}">