feat: add fading effect

Author: ikizey

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css

@@ -110,6 +110,16 @@
   pointer-events: none;
 }
 
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .offlineWrapper {
   position: absolute;
   top: 20px;

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue

@@ -66,16 +66,18 @@
         <span>{{ $t('Video.Player.Stats.Dropped Frames / Total Frames', stats.frames) }}</span>
       </template>
     </div>
-    <div
-      v-if="showValueChangePopup"
-      class="valueChangePopup"
-    >
-      <font-awesome-icon
-        v-if="valueChangeIcon"
-        :icon="['fas', valueChangeIcon]"
-      />
-      {{ valueChangeMessage }}
-    </div>
+    <Transition name="fade">
+      <div
+        v-if="showValueChangePopup"
+        class="valueChangePopup"
+      >
+        <font-awesome-icon
+          v-if="valueChangeIcon"
+          :icon="['fas', valueChangeIcon]"
+        />
+        {{ valueChangeMessage }}
+      </div>
+    </Transition>
     <div
       v-if="showOfflineMessage"
       class="offlineWrapper"