I want to make a delay before triggering the next page when clicking a link opening a new route.
So I want the current page to fade out - then wait a small second before starting the fadeIn of the next page.
Current Transition below using Animate.css's Fade library.
<transition leave-active-class="animated fadeOut" enter-active-class="animated fadeInDown">
<router-view></router-view>
</transition>
It's working nicely, but the change of page is too instant. The two routes are intersecting/fading into each others.
I want a clean fadeout -> full blank -> then open new page.
How to achive this?
You should change the transition mode from the default to out-in (https://v2.vuejs.org/v2/guide/transitions.html#Transition-Modes)
<transition
mode="out-in"
leave-active-class="animated fadeOut"
enter-active-class="animated fadeInDown">
<router-view></router-view>
</transition>
Related
I'm trying to implement generic modal component with Vue 3.
And I want to close modal window on click outside the modal's content.
So I added 'close' event on modalWrapper and 'contentClick' to prevent closing (bubbling) when content is clicked:
contentClick(event:Event){
event.stopPropagation();
}
Modal:
<template>
<teleport to="body">
<div class="modal-window" v-on:click="close" v-show="isOpened">
<slot class="modal-window__content" v-on:click="contentClick($event)"></slot>
</div>
</teleport>
</template>
The problem is that contentClick(event:Event) is not fired for some reason. I can wrap slot into another div and put contentClick event on it, but not sure that it's a good solution
I need to show a linear progress bar when a save button is clicked. The progress bar needs to update on each time interval and after completion it needs to be hide.
Added vue component
<template>
<div class="components" :key="documentComponentkey">
<!--Document Version History Component-->
<DocumentHistoryComponents></DocumentHistoryComponents>
<!--Generic Header Component-->
<HeaderComponents></HeaderComponents>
<div class="components-sub-container">
<!--Generic Form Component-->
<BodyComponents></BodyComponents>
</div>
<!--Generic Footer Component-->
<FooterComponents></FooterComponents>
</div>
Image
<v-progress-linear v-if=true indeterminate></v-progress-linear>
Try changing the prop indeterminate as in snippet. The progress bar display depends on V-if evaluation. If Your v-if results in true, the progress bar will be displayed and will have continuously animation of progress.
If v-if results in false you will not see the progress bar . So set v-if when save is complete (may be once you get a signal from backend if you have set up that way).
I have got Aurelia CssAnimator working and thats fine however I assumed it would act on any div and anything within that div however all the times I tried to make a div with other tags inside have animations nothing worked. I had this and because it has in side the div it fails to work.
<require from="./animateOnChange"></require>
<div animateonchange.bind="messageStrong">
<strong>${messageStrong}</strong>
${messageStrong}
</div>
What I wanted to animate is a div that has a bootstrap alert class as per:
<template>
<div animateonchange.bind="messageStrong">
<div class="alert alert-${alertType}" role="alert">
<strong>${messageStrong}</strong> ${message}
</div>
</div>
</template>
I assumed wrongly that anything that sat within the div being animated would also be animated. Its not so.
How would I make these message alerts disappear after 10 seconds ie fade out using javascript? I have bootstrap 3..
I have a sort of simple question. Im building a carousel which rotates vertically using vue. When the user clicks the forward button, I want vue to transition the elements in/out using my 'forward' transition (moving them down). When the user clicks the backward button, I want vue to transition the elements in/out using my 'backward' transition (moving them up).
Right now, I just have one transition that performs my forward transition, whether the user is navigating forward or backward.
Is there any way to accomplish this?
Heres my component:
<template>
<div class="carousel__container">
<div class="carousel__visible">
<div class="carousel__slides">
<transition-group name="carouselNext">
<div v-for="(quote, index) in quotes" class="carousel__slide" key="index" v-show="index === currentSlide">
<blockquote>{{ quote.quote }}</blockquote>
<cite>{{ quote.cite }}</cite>
</div>
</transition-group>
</div>
</div>
<button class="btn btn--alt" #click="prev">Back</button>
<button class="btn btn--primary" #click="next">Next</button>
</div>
Thanks!
Easiest way is to change the transition name based on direction
<transition-group name="carouselNext"> can become <transition-group :name="direction">
add new direction data var and include toggling based on methods
prev(){
this.direction = "carouselPrev"
this.currentSlide = (this.currentSlide + this.quotes.length - 1)%this.quotes.length
},
next(){
this.direction = "carouselNext"
this.currentSlide = (this.currentSlide + 1)%this.quotes.length
}
and finally add the alternate carouselPrev css transition classes
here's a working example https://codepen.io/scorch/pen/NwwpxM
When the app has been inactive for a while and I click on a navigation link, I see my "page isnavigating" spinner rotating for a few seconds and then just before the new page loads, the old page I navigated away from flashes on screen for a split second and it's highly distracting.
My content section in my shell.html page is:
<section>
<!--<section id="content" class="main"> -->
<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
<!--</section>-->
</section>
It happens whether cacheviews is set to true or false, so it's not that. It also happens whether transitions are turned on or not.
Once the app is loaded and actively being used, it is responsive, fast and the transitions work perfectly.