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.
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 Vue 2 application. It uses router to manage pages. On one page, you can click to go to the next page, and the next page is the same component. You can think of it like a folder page going to a new sub folder page. The URL is the mostly same, except for the folder ID.
I want this animated, so the new component slides in from the right, over-top the old page.
But I think the router likes to reuse the same component, so how can I make multiple pages of the same component?
You can use the key attribute on your component, keyed to the route's folder ID param so that every new page load causes Vue to re-render the component which should also trigger your animation.
codesandbox
<template>
<div class="container">
<Transition name="slide">
<h1 class="text" :key="$route.params.id">Page {{ $route.params.id }}</h1>
</Transition>
</div>
</template>
.container {
position: relative;
}
.text {
position: absolute;
}
.slide-enter-active {
animation: slide 1s;
}
.slide-leave-active {
transition: all 1s;
opacity: 0;
}
#-webkit-keyframes slide {
0% {
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
#keyframes slide {
0% {
-webkit-transform: translateX(200px);
transform: translateX(200px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
Using Vuejs the data of some elements on the page is changing.
However, this change is not understood by the user.
For example, I am making a counter by clicking a button. I am printing data as {{counter}} to span element.
But this change is not noticed by the user. How can I give it various animations?
I tried to combine a css that I found have an animation I wanted, but was unsuccessful.
The Vuejs documentation says you can do it with toggleCss, but that's not what I want.
var app=new Vue({
el: "#app",
data: {
myCount:0
}
,
methods: {
btnCount() {
this.myCount+=1
}
}
})
<div id='app'>
<button #click='btnCount'>
+++++
</button>
<span class='myAnimSpan'>{{myCount}}</span>
</div>
span:hover {
animation: shake 0.5s;
}
#keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
Jsfiddle : https://jsfiddle.net/au4x031g/
You can use Vue transitions (see https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components).
Using a <transition> tag with name, and the element with key (each change to that key will trigger a transition update)
<transition name="shaketext">
<span class='myAnimSpan' :key="myCount">{{myCount}}</span>
</transition>
The name property is used for css declarations for enter/leave events, for example:
.shaketext-enter-active {
animation: shake 0.9s;
}
.shaketext-leave-to, .shaketext-leave-active{
display: none;
}
Also, to make transforms work, the span element should be a block element (display:inline-block for example)
.myAnimSpan {
display: inline-block;
}
https://jsfiddle.net/udctfs49/1/
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);
}
}
I'm new to Vue.js and I have a (block) element that should be initially hidden on page load. I'm coming from a pure JS mixed with JQuery background so normally I would initially set display:none on the element use JQuery's show/hide methods etc.
I have the showing and hiding working correctly with Vue but a side effect is that the element flashes on the screen briefly on page load until the Vue setup is complete and it knows to hide the element. Setting display:none breaks the show/hide presumably because the elements class prop has higher precedence. Setting opacity:0 also seems to be overriding anything Vue is doing so that breaks the show/hide too. !important on the Vue animation classes does not help either.
The embedded sandbox below might not be the best way to reproduce this, and I suppose it might be system dependent too (speed, memory etc.) but surely this must be a common enough situation with some solution that I've missed.
VUE = new Vue({
el: '#app',
data: {
showFullpageSpinner: false
}
});
setTimeout(function() {
VUE.showFullpageSpinner = true;
setTimeout(function() { VUE.showFullpageSpinner = false; }, 1500);
}, 1500);
.fullpage-spinner-underlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.65);
z-index: 9999;
}
.fullpageSpinner-enter-active, .fullpageSpinner-leave-active {
transition: opacity .25s;
}
.fullpageSpinner-enter, .fullpageSpinner-leave-to {
opacity: 0;
}
.css-spinner {
position: absolute;
display: inline-block;
}
.css-spinner:before {
content: 'Loading...';
position: absolute;
}
.css-spinner:not(:required):before {
content: '';
border-radius: 50%;
border-top: 3px solid #daac35;
border-right: 3px solid transparent;
animation: spinner .7s linear infinite;
-webkit-animation: spinner .7s linear infinite;
}
#keyframes spinner {
to {-ms-transform: rotate(360deg);}
to {transform: rotate(360deg);}
}
#-webkit-keyframes spinner {
to {-webkit-transform: rotate(360deg);}
to {transform: rotate(360deg);}
}
#-moz-keyframes spinner {
to {-moz-transform: rotate(360deg);}
to {transform: rotate(360deg);}
}
.fullpage-loading-spinner {
left: 50%;
top: 45%;
margin-left: -40px;
margin-top: -55px;
}
.fullpage-loading-spinner:BEFORE {
width: 55px;
height: 55px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<transition name="fullpageSpinner">
<div v-if="showFullpageSpinner" class="fullpage-spinner-underlay">
<div class="css-spinner fullpage-loading-spinner"></div>
</div>
</transition>
</div>
Your problem seems to be solvable with the v-cloak directive.
This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.
Example:
[v-cloak] {
display: none;
}
<div v-if="showFullpageSpinner" class="fullpage-spinner-underlay" v-cloak>
<div class="css-spinner fullpage-loading-spinner"></div>
</div>