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;
}
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.
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.
I'm trying to transition this svg across the page when the route changes.
I've tried setting a watcher so when route path is 'comp1':'comp2' it should animate depending on the result.
The transitionName changes correctly, but the animation isn't firing...
Would love some help to know if this is possible and If so where I'm going wrong?
Thanks
<template>
<div class="background">
<div class="background__content">
<transition :name="transitionName"
mode="out-in">
<figure class="background__shape--primary">
<svg viewBox="-5 -10 130 130">
<path d="m0 0, 120 0, -60 100Z">
</path>
</svg>
</figure>
</transition>
</div>
</div>
</template>
<script>
data(){
return {
transitionName: '',
}
},
watch: {
$route(to){
let path = to.path;
if(path === '/one'){
this.transitionName = 'comp1';
}
else {
this.transitionName = 'comp2';
}
}
},
</script>
<style>
enter code here
.comp1-enter-active{
transform: translate(20px, -50px);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
}
.comp1-enter,
.comp1-leave-active{
opacity: 0;
transform: translate(20px, -50px);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
}
.comp1-leave-active,
.comp1-enter {
opacity: 0;
animation-delay: 300ms;
transform:translate(-26px, 80px);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
}
.comp2-enter,
.comp2-leave-active{
opacity: 0;
transform: translate(50px, 20px);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
}
.comp2-leave-active,
.comp2-enter {
opacity: 0;
animation-delay: 300ms;
transform:translate(10px, 15px);
transition-duration: 0.3s;
transition-property: transform;
transition-timing-function: ease;
}
</style>
What you want to use is vue class bindings with just a regular div.
<div :class="currentTranstion">Your SVG</div>
computed: {
currentTransition: ()=>{
return{
comp1: router.currentRoute === one;
comp2: router.currentRoute === two;
}
}
}
This is not the most effcient way to do it but it is a breif idea
If you are cofused about css transtions w3schools explains it very well
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 Jssor Slider , i want to make the 2 arrows left and right appear and display with fadein and fadeout
- when mouse over the 2 arrow fadein
- when mouse out the 2 arrows fadeout
any suggestion
thanks
Given there is an arrow navigator skin 'skin\arrow-01.source.html', please add following css code to to this job.
#slider1_container .jssora01l, #slider1_container .jssora01r {
opacity: 0;
}
#slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r {
opacity: 1;
}
.jssora01l, .jssora01r {
-webkit-transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
-o-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
And finally you will get the following arrow navigator skin,
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 01 css */
/*
.jssora01l (normal)
.jssora01r (normal)
.jssora01l:hover (normal mouseover)
.jssora01r:hover (normal mouseover)
.jssora01ldn (mousedown)
.jssora01rdn (mousedown)
*/
.jssora01l, .jssora01r, .jssora01ldn, .jssora01rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a01.png) no-repeat;
overflow:hidden;
}
.jssora01l { background-position: -8px -38px; }
.jssora01r { background-position: -68px -38px; }
.jssora01l:hover { background-position: -128px -38px; }
.jssora01r:hover { background-position: -188px -38px; }
.jssora01ldn { background-position: -8px -38px; }
.jssora01rdn { background-position: -68px -38px; }
#slider1_container .jssora01l, #slider1_container .jssora01r {
opacity: 0;
}
#slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r {
opacity: 1;
}
.jssora01l, .jssora01r {
-webkit-transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
-o-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora01l" style="width: 45px; height: 45px; top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora01r" style="width: 45px; height: 45px; top: 123px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->