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); } }
Related
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>
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.
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 have been trying to make this owl-carousel by John Higgins (http://jonhiggins.co.uk/words/animated-rotating-cursor-over-carousel/) work with bootstrap.
This theme makes the cursor act like 'prev' and 'next' buttons when hovering the carousel image. But it seem that when I put html into a responsive container of bootstrap it somehow messes with the cursor.
When the browser width is expanded you will notice that the arrow doesn't switch from right to left. Please have a look at the fiddle.
https://jsfiddle.net/ftpptf/c6nw8yzt/
/* BEGIN Cursor*/
.cursor {
display: none;
top: 0;
left: 0;
position: fixed;
z-index: 1000;
width:33px;
height:54px;
margin-top: 60px;
margin-left: 33px;
pointer-events: none;
&.isVisible {
display: block;
}
}
.js--visible {
display: block;
}
.cursor__icon {
width:32px;
height:32px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw MC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBpZD0ic3ZnIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsa W1pdD0iMTAiIGQ9Ik0yNC4xIDMwTDcuOSAxNiAyNC4xIDIiPjwvcGF0aD48L3N2Zz4=');
background-repeat:no-repeat;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
.carousel.offScreen .cursor {
display: none;
}
.carousel.right .cursor__icon {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* END Cursor*/
I have set .cursor .cursor__icon position = absolute which seemed to help but it still acts weird.
I have tried loads of different settings but without any good results!
Any help will be highly appreciated - thanks in advance!
Glad the Codepen example is of use to you.
It looks like the issue is that your carousel's left edge isn't at 0px (far left of the window), it's halfway across the screen. My example didn't account for this scenario as the carousel filled the viewport horizontally.
Hopefully this fiddle resolves that: https://jsfiddle.net/jonjhiggins/z915kbe3/
Changes made were:
CSS: making the carousel and images 100% width instead of 800px (so that it will responsively fill the width of whatever you set it's parent to)
.carousel {
width: 100%;
cursor: none;
}
.carousel img {
width:100%;
}
JS: changing initLayout to account for when the carousel isn't on far left of screen
var _initLayout = function () {
left = $element.offset().left;
right = left + ($element.width() / 2);
};
JS: add resize event to re-calculate the left/right positions when the window is resized or device is rotated
var _initEvents = function () {
$element.on('mousemove', _mousemove)
.on('click', _click);
$(window).on('resize', _initLayout);
};