I have implemented an animation in nativescript.
tns.html file
<StackLayout class="card">
<Label text="Testing"></Label>
</StackLayout>
tns.scss file
.card {
animation-name: opacity;
animation-duration: 2;
}
#keyframes opacity {
from { opacity: 0; }
to { opacity: 1; }
}
Every time I leave the app and then open it again, the animation repeats. How do I prevent the animation from repeating when the app is opened the second time?
Related
The problem I am running into is that all the elements are rendered first before the animation starts. The effect that I want to achieve is that the element is animated while entering the DOM and it happens one after another. What's wrong with my code?
<template>
<TransitionGroup appear name="stagger" tag="ul">
<li v-for="(num, index) in list" :style="{ '--order': index }" :key="num">
{{ num }}
</li>
</TransitionGroup>
</template>
<script setup>
const list = Array.from({ length: 5 }, (_, index) => index + 1);
</script>
<style scoped>
.stagger-enter-active {
animation-name: stagger;
animation-duration: 0.5s;
animation-delay: calc(var(--order) * 0.15s);
}
#keyframes stagger {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
After reading the official doc one more time, I realized that the same animation effect can be made with just transition and it works, which got me wondering what's the main difference between these two approaches?
.stagger-enter-from {
opacity: 0;
transform: translateX(-1em);
}
.stagger-enter-active {
transition: opacity 0.5s linear, transform 0.5s ease;
transition-delay: calc(var(--order) * 0.15s);
}
I have a simple VueJS application where I have multiple routes. For a pair of routes, I want to have a scroll down and scroll up animation while routes change.
For example, I have a search/dropdown page, where after the search result from the dropdown is selected, I want to take him to the details page but with a scroll down animation. So that the user feels he is still on the same page.
I have tried using the VuePageTransition library. That is indeed a great library but does not have this specific animation that I need.
Update:
I tried the following code. It gives a scroll-like animation but the leaving page is shown going down but the coming page is not shown during the animation.
In the template in App.vue
<template>
<div id="app">
<transition name="slide" mode="out-in">
<router-view></router-view>
</transition>
</div>
</template>
In the style tag,
.slide-enter {
}
.slide-enter-active {
animation: slide-in-coming 2s ease-out forwards;
}
.slide-leave {
}
.slide-leave-active {
animation: slide-in 2s ease-out forwards;
}
#keyframes slide-in {
from {
transform: translateY(0);
}
to {
transform: translateY(800px);
}
}
#keyframes slide-in-coming {
from {
transform: translateY(-800px);
}
to {
transform: translateY(0);
}
}
Take a look at Basic form at Vuelidate documentation. If the rule is broken (text is too short), the label is red, then eror message appears and the input field shakes for a while. How is this done? I have copied the source code sample and the shaking effect is not there. I cannot even simulate it with an official fiddle: https://jsfiddle.net/so89zmpe/2/
<div class="form-group" :class="{ 'form-group--error': $v.name.$error }">
<label class="form__label">Name</label>
<input class="form__input" v-model.trim="$v.name.$model"/>
</div>
I cannot find anything relevant in Chrome developer
If you open DevTools > Animations tab, you can see that there's an animation name of shakeError applied on .form-group.form-group--error:
Here's the definition of shakeError:
#keyframes shakeError {
0% {
transform: translateX(0); }
15% {
transform: translateX(0.375rem); }
30% {
transform: translateX(-0.375rem); }
45% {
transform: translateX(0.375rem); }
60% {
transform: translateX(-0.375rem); }
75% {
transform: translateX(0.375rem); }
90% {
transform: translateX(-0.375rem); }
100% {
transform: translateX(0); } }
And then,
.form-group--alert,
.form-group--error {
animation-name: shakeError;
animation-fill-mode: forwards;
animation-duration: .6s;
animation-timing-function: ease-in-out; }
You can check the Sources tab of https://vuelidate.js.org/#sub-basic-form for a docs.scss file to dig in deeper.
I am trying to apply toggle between divs. But I couldn't make it happen. I know I can't put two elements inside the transition. I need to a transition-group for that. But when I use group, then it says bind the elements inside group. But I am not looping the elements... So I am a bit stuck about solving this...
template
<div>
<transition name="view">
<map-view
v-show="this.screenView == 'map'"
:changeView="changeView" />
<list-view
v-show="this.screenView === 'list'"
:changeView="changeView" />
</transition>
</div>
script
methods: {
changeView(screen){
this.screenView = screen;
}
}
styles
.view-enter-active, .view-leave-active {
transition: opacity .5s
}
.view-enter, .view-leave-to {
opacity: 0
}
By the way changeView() is working. No problem about that part. Just trying to toggle between divs.
Thanks to advice in the comments.
I tried to give different keys to elements.
<transition-group name="view">
<map-view
key="maps"
v-show="this.screenView == 'map'"
:changeView="changeView" />
<list-view
key="list"
v-show="this.screenView === 'list'"
:changeView="changeView" />
</transition-group>
and changed the styles like below.
.view-enter-active, .view-leave-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}
.view-enter-active {
transition-delay: 0.5s;
}
.view-enter, .view-leave-to {
opacity: 0;
}
.view-enter-to, .view-leave {
opacity: 1;
}
It's working now.
I`m using Aurelia develop my project, When navigating, i want to add some transition between routes(e.g. fadeIn, fadeOut),but i don't know how to do it ? Thanks.
How to using aurelia-animator-velocity to implement the effects?
Using aurelia-animator-css.
You must put the style class="au-animate" on the topmost div in your route file. This must be the main div of the html template.
Sample router HTML
<template>
<div class="au-animate">
<div class="router-body">
<div class="router-list">
</div>
</div>
</div>
</template>
Sample animate CSS
#keyframes fadeOutRight {
100% {
opacity: 0;
transform: translate(100%, 0);
}
0% {
opacity: 1;
transform: none;
}
}
#keyframes fadeInRight {
100% {
transform: none;
}
0% {
transform: translate(-100%, 0);
}
}
.au-enter {
transform: translate(100%, 0);
}
.au-enter-active {
animation: fadeInRight 0.3s;
}
.au-leave-active {
animation: fadeOutRight 0.3s;
}
Aurelia Velocity
To add animations to specific elements:
<section anim-enter="fadeIn" anim-leave="fadeOut"></section>
<section anim-enter="{opacity:0};{duration:1000,easing:ease-out}"></section>
Use With JS
To use enter/leave animations on any element the animator has to be invoked manually.
To do this inject it into your VM an call the enter/leave methods.
import {VelocityAnimator} from "gooy/aurelia-animator-velocity";
export class MyCustomElement{
static inject = [Element,VelocityAnimator];
constructor(element,animator) {
this.element = element;
this.animator = animator;
}
attached(){
//run enter animation on the element
this.animator.enter(this.element);
//run leave animation on the element
this.animator.leave(this.element);
//run an effect on the element
this.animator.animate(this.element,"callout.bounce");
}
}
the answer will be aurelia-animator-css
here is a basic tutorial.