tweaks to page transitions

src/renderer/index.js

@@ -210,6 +210,7 @@ const app = new Vue({
         tmpVar: [],
         notification: false,
         chrome: {
+            desiredPageTransition: "wpfade_transform",
             hideUserInfo: ipcRenderer.sendSync("is-dev") || false,
             artworkReady: false,
             userinfo: {
@@ -424,7 +425,7 @@ const app = new Vue({
             }
             app.routeView(item)
         },
-        saveFile(fileName,urlFile){
+        saveFile(fileName, urlFile) {
             let a = document.createElement("a");
             a.style = "display: none";
             document.body.appendChild(a);
@@ -475,7 +476,15 @@ const app = new Vue({
             }
         },
         navigateBack() {
-            history.back()
+            this.chrome.desiredPageTransition = "wpfade_transform_backwards"
+            return new Promise((resolve, reject) => {
+                history.back()
+                setTimeout(() => {
+                    
+                    
+                    resolve(this.chrome.desiredPageTransition = "wpfade_transform")
+                }, 100)
+            })
         },
         navigateForward() {
             history.forward()
@@ -627,7 +636,7 @@ const app = new Vue({
                 this.chrome.userinfo = (await app.mk.api.v3.music(`/v1/me/social-profile`)).data.data[0]
             } catch (err) {
             }
-            
+
             this.mk._bag.features['seamless-audio-transitions'] = this.cfg.audio.seamless_audio
 
             // API Fallback
@@ -734,7 +743,7 @@ const app = new Vue({
                     }
                     break;
                 case "history":
-                    let history = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, { l : app.mklang})
+                    let history = await app.mk.api.v3.music(`/v1/me/recent/played/tracks`, { l: app.mklang })
                     if (history.data.data.length > 0) {
                         let lastItem = history.data.data[0]
                         let kind = lastItem.attributes.playParams.kind;
@@ -752,7 +761,7 @@ const app = new Vue({
                             })
                         }, 1500)
                     }
-                    
+
                     break;
                 case "disabled":
 
@@ -896,10 +905,11 @@ const app = new Vue({
             less.refresh()
         },
         unauthorize() {
-            bootbox.confirm(app.getLz('term.confirmLogout'), function(result){ 
+            bootbox.confirm(app.getLz('term.confirmLogout'), function (result) {
-                if (result){
+                if (result) {
-                app.mk.unauthorize()
+                    app.mk.unauthorize()
-                document.location.reload()}
+                    document.location.reload()
+                }
             });
         },
         getAppClasses() {

src/renderer/style.less

@@ -2735,12 +2735,31 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .wpfade_transform-enter-active,
 .wpfade_transform-leave-active {
-  transition: opacity .1s var(--appleEase), transform .1s var(--appleEase);
+  --transitionTime: 0.2s;
+  transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
 }
 
-.wpfade_transform-enter,
+.wpfade_transform-enter {
+  opacity: 0;
+  transform: translateX(50%);
+}
 .wpfade_transform-leave-to {
-  transform: translateX(20px);
+  opacity: 0;
+  // transform: translateX(-50%);
+}
+
+
+.wpfade_transform_backwards-enter-active,
+.wpfade_transform_backwards-leave-active {
+  --transitionTime: 0.2s;
+  transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
+}
+
+.wpfade_transform_backwards-enter {
+  opacity: 0;
+  transform: translateX(-50%);
+}
+.wpfade_transform_backwards-leave-to {
   opacity: 0;
 }
 

src/renderer/views/app/app-content.ejs

@@ -17,7 +17,7 @@
                 <%
                     }
                 %>
-                name="wpfade_transform"
+                :name="chrome.desiredPageTransition"
         >
             <template
                 v-if="<%- env.appRoutes[i].condition %>"
@@ -27,7 +27,7 @@
         </transition>
     <% } %>
 
-    <transition v-on:enter="getRadioStations()" name="wpfade_transform">
+    <transition v-on:enter="getRadioStations()" :name="chrome.desiredPageTransition">
         <template v-if="page == 'radio'" @created="console.log('radio')">
             <div class="content-inner">
                 <h1 class="header-text">{{$root.getLz('term.radio')}}</h1>
@@ -37,23 +37,23 @@
         </template>
     </transition>
     <!-- Library - Recently Added -->
-    <transition name="wpfade_transform" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
+    <transition :name="chrome.desiredPageTransition" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
         <%- include('../pages/library-recentlyadded') %>');
     </transition>
     <!-- Library - Albums -->
-    <transition name="wpfade_transform" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
+    <transition :name="chrome.desiredPageTransition" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
         <%- include('../pages/library-albums') %>');
         %>
     </transition>
     <!-- Library - Made For You -->
-    <transition name="wpfade_transform" v-on:enter="getMadeForYou()">
+    <transition :name="chrome.desiredPageTransition" v-on:enter="getMadeForYou()">
         <template v-if="page == 'library-madeforyou'">
             <%- include('../pages/madeforyou') %>');
             %>
         </template>
     </transition>
     <!-- Library - Artists-->
-    <transition name="wpfade_transform" v-on:enter="getLibraryArtistsFull(null, 0);">
+    <transition :name="chrome.desiredPageTransition" v-on:enter="getLibraryArtistsFull(null, 0);">
         <template v-if="page == 'library-artists'">
             <%- include('../pages/library-artists') %>');
             %>