diff --git a/src/renderer/index.js b/src/renderer/index.js index ef140567..21edc880 100644 --- a/src/renderer/index.js +++ b/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){ - if (result){ - app.mk.unauthorize() - document.location.reload()} + bootbox.confirm(app.getLz('term.confirmLogout'), function (result) { + if (result) { + app.mk.unauthorize() + document.location.reload() + } }); }, getAppClasses() { diff --git a/src/renderer/style.less b/src/renderer/style.less index 6489561a..28473cf2 100644 --- a/src/renderer/style.less +++ b/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; } diff --git a/src/renderer/views/app/app-content.ejs b/src/renderer/views/app/app-content.ejs index 8bd2de6b..c9c06fec 100644 --- a/src/renderer/views/app/app-content.ejs +++ b/src/renderer/views/app/app-content.ejs @@ -17,7 +17,7 @@ <% } %> - name="wpfade_transform" + :name="chrome.desiredPageTransition" >