I have created a transition to be run between route changes:
.page-enter-active {
position: absolute;
width: 100%;
//max-height: 100vh;
overflow: hidden;
animation: slideScaleRight 2s ease;
}
.page-leave-active {
position: absolute;
width: 100%;
//max-height: 100vh;
overflow: hidden;
animation: scaleSlideRight 2s ease;
}
#keyframes scaleSlideRight {
0% {
transform: scale(1);
}
33% {
transform: scale(0.75) translateX(0);
opacity: 0.5;
}
66% {
transform: scale(0.75) translateX(150%);
}
100% {
transform: scale(0.75) translateX(150%);
}
}
#keyframes slideScaleRight {
0% {
transform: scale(0.75) translateX(-150%);
}
33% {
transform: scale(0.75) translateX(-150%);
}
66% {
opacity: 0.5;
transform: scale(0.75) translateX(0);
}
100% {
transform: scale(1) translateX(0);
}
}
The transition run smooth but I just discover that if the page is not at top position, before leaving, nuxt force an scroll to the top making the experience really bad...
I can guess nuxt is scrolling up before triggering the transition and I really would like to keep the page where it is before leaving.
Any ideas?
You could set scrollToTop: false on an upper page (or even in /layouts/default.vue?) to prevent the scrolling of the page as shown in the documentation.
If you want more granularity, you could also look into scrollBehavior.
Related
enter image description here
CSS code(below):
.navigation-list a:before , .navigation-list a:after {
position:inherit;
top:inherit ;
width:fit-content;
height: fit-content;
border: 4px solid #ABC9FF;
transform: translateX(-50%) translateY(-50%) scale(0.8);
border-radius: 45%;
background: transparent;
content: "";
opacity: 0;
transition: all 0.4s;
z-index: -1;
}
.navigation-list a:after {
border-width: 2px;
transition: all 0.5s;
}
.navigation-list a:hover:before {
opacity: 1;
transform:translateX(-50%) translateY(-50%) scale(1);
}
.navigation-list a:hover:after {
opacity: 1;
transform:translateX(-50%) translateY(-50%) scale(1.3);
}
Summarized, my animation consists of two circles to the sides, 2hich is not what I expected. Would anyone know what is missing or what can I change to have a Circle appearing in the back as the mouse hovers any anchor element in the navbar.
in the example below:
wrap should be initially hidden
after one second - in should be outside of page
next second - it should go into page
finishing animation - it should stay visible - and here is the problem - it goes hidden
If I remove visibility:hidden at start - it is visible the first second - that's not allowed
how to do this ?
.wrap{
visibility:hidden; width:54px; height:54px; background:orange;
}
.wrap{animation: wrap 1s; animation-delay:1s}
#keyframes wrap{
0% {transform: translateX(-300px); visibility:visible}
100% {transform: translateX(0);}
}
<div class='wrap'></div>
This is happens, when the animation finished, the swap class gets its initial value from itself. To solve this you need add in the last keyframe (100%) visibility: visible; and also add animation-fill-mode: forwards; to stop the animation on the last keyframe.
.wrap {
visibility: hidden;
width: 54px;
height: 54px;
background: orange;
}
.wrap {
animation: wrap 1s;
animation-delay: 1s;
animation-fill-mode: forwards; /* new line */
}
#keyframes wrap {
0% {
transform: translateX(-300px);
visibility: visible;
}
100% {
transform: translateX(0);
visibility: visible; /* new line */
}
}
.wrap {
visibility: hidden;
width: 54px;
height: 54px;
background: orange;
}
.wrap {
animation: wrap 1s;
animation-delay: 1s;
animation-fill-mode: forwards; /* new line */
}
#keyframes wrap {
0% {
transform: translateX(-300px);
visibility: visible;
}
100% {
transform: translateX(0);
visibility: visible; /* new line */
}
}
<div class="wrap"></div>
Vue.js v2.2.1
JSFiddle: https://jsfiddle.net/loop_/59g7w1pa/8/
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-to, .fade-leave {
opacity: 0.5;
}
".fade-enter-to, .fade-leave" are supposed to set the state after transition, but not working as expected.
Expected:
Smooth transition from "opacity 0" to "opacity 0.5"
Actual:
Smooth transition from "opacity 0" until "opacity 0.5", then suddenly jump to "opacity 1"
Transition classes are removed and the transition does not have a proper easing, you should add transition property to .square class.
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-to,
.fade-leave {
opacity: .5;
}
.square {
margin-top: 2rem;
height: 10rem;
width: 10rem;
background-color: #000;
transition: opacity .5s linear;
}
async presentLoading() {
const loading = await this.loader.create({
duration: 2000,
showBackdrop:false,
cssClass:'sa',
spinner:'false',
message:`
<div class="custom-spinner-container">
<img class="loading" width="120px" height="120px" src="assets/loader1.gif" />
</div>`
});
return await loading.present();
}
You can just simply achieve it with css
//Header of file
import { LoadingController } from "#ionic/angular";
//In the constructor
constructor(public loadingCtrl: LoadingController) {
}
async showLoader () {
this.loader = await this.loadingCtrl.create({
cssClass: 'custom-loader',
spinner: null
});
await this.loader.present();
}
/* Inside global.scss
You can create amazing gifs with
https://loading.io/animation
*/
.custom-loader {
--background: transparent;
ion-backdrop {
background-color: #fff;
opacity: .9 !important;
}
.loading-wrapper {
-webkit-animation: ld-vortex-out 2s ease-out infinite;
animation: ld-vortex-out 2s ease-out infinite;
animation-timing-function: cubic-bezier(0.05, 0, 3, 0.05);
background-image: url("/assets/img/baubap-logo-circle.svg");
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
min-width: 90px;
min-height: 90px;
box-shadow: none;
-webkit-box-shadow: none;
}
}
#keyframes ld-vortex-out {
0% {
-webkit-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity: 1;
}
60% {
-webkit-transform: rotate(1800deg) scale(1);
transform: rotate(1800deg) scale(1);
opacity: 1;
}
100% {
-webkit-transform: rotate(1800deg) scale(1);
transform: rotate(1800deg) scale(1);
opacity: 0;
}
}
#-webkit-keyframes ld-vortex-out {
0% {
-webkit-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity: 1;
}
60% {
-webkit-transform: rotate(1800deg) scale(1);
transform: rotate(1800deg) scale(1);
opacity: 1;
}
100% {
-webkit-transform: rotate(1800deg) scale(1);
transform: rotate(1800deg) scale(1);
opacity: 0;
}
}
Result
Baubap loader screen
So did you check documentation?
In Ionic 3 it was a different syntax and it was not supposed to change:
https://ionicframework.com/docs/api/components/loading/LoadingController/
See their example - use different value for hiding default spinner...
Try this:
async presentLoading() {
const loading = await this.loader.create({
duration: 2000,
showBackdrop:false,
cssClass:'sa',
spinner:'hide',
message:`
<div class="custom-spinner-container">
<img class="loading" width="120px" height="120px" src="assets/loader1.gif" />
</div>`
});
return await loading.present();
}
Update: seems like in Ionic 4 suggested way to deal with loader animation is via ion-spinner. But its unclear if the old way should break or is just not supported yet in Beta
I'm using au-animate in each view to make a page transition:
the current view slides left out (from center to left) and the next view slides left in (from right to center).
#keyframes slideLeftIn {
0% {transform: translate(100%, 0);}
100% {transform: translate(0, 0);}
}
#keyframes slideLeftOut {
0% {transform: translate(0, 0);}
100% {transform: translate(-100%, 0);}
}
.pages.au-enter-active {
animation: slideLeftIn 0.8s;
}
.pages.au-leave-active {
animation: slideLeftOut 0.8s;
}
Based on: Aurelia router view animation with swap-order="with"
Now, I need to have both views in the DOM during the transition, like in W3 slide.
Is there a way to achieve this in aurelia?
UPDATE:
It appears to be a bug preventing this:
error aurelia-templating-router 1.0.1 with swap-order
UPDATE2:
In the last release this bug was fixed! Aurelia rocks.
#keyframes slideLeftIn {
0% {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0); }
100% {
-webkit-transform: none;
transform: none; } }
#keyframes slideLeftOut {
0% {
-webkit-transform: none;
transform: none; }
100% {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0); } }