I'm using VueJs transition to make a component appVacancies slide.
<transition name="slide-down" mode="out-in" appear>
<appVacancies v-if="showVacancies"></appVacancies>
</transition>
It's Vue specific CSS for transition is
// Slide Down animation
.slide-down-active, .slide-down-leave-active {
transition: all .5s ease-out;
}
.slide-down-enter, .slide-down-leave-to {
opacity: 0;
transform: translateY(20%);
}
On created() life-cycle hook I'm just using setTimeout() to make showVacancies boolean to true.
I also have a fade animation with similar configuration but that is working.
<transition name="fade">
<h1 v-if="!showMotion" class="display-2 grad-text mt-4">Welcome!</h1>
</transition>
// CSS
.fade-enter-active, .fade-leave-active {
transition: opacity .5s ease-out;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
I don't know what I'm doing wrong here. Please help.
Related
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);
}
}
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.
Say I have a normal transition, which works perfectly fine (following vue docs). But I would like to have another transition INSIDE that one.
So for example, an element slides in, but then the text within that fades in at the same time?
I can't get the inside child transition to animate. It's not getting fired? I've tried "appear" also thinking the node is new.
There's almost no information out there on this.
<div id="demo">
<transition name="slide">
<div v-if="show">
<transition name="slide-fade">
<p>hello</p>
</transition>
</div>
</transition>
</div>
Transition effects
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.slide-fade-enter-active {
transition: all 0.3s ease;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
You did not seem to add the transition CSS for the slide component. The following should work:
const vm = new Vue({
el: '#demo',
data() {
return {
show: true
}
}
})
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: opacity 0.5s;
}
.slide-fade-enter,
.slide-fade-leave-to {
opacity: 0;
}
.slide-enter-active {
transition: all 0.3s ease;
}
.slide-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-enter,
.slide-leave-to {
transform: translateX(10px);
opacity: 0;
}
/* Some styling to make them noticeable */
.parent {
background-color: lightgray;
padding: 2px;
}
.child {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<transition name="slide">
<div v-if="show" class="parent">
<transition name="slide-fade">
<p class="child">hello</p>
</transition>
</div>
</transition>
<button #click="show = !show">Toggle</button>
</div>
I've created a code which is changing the current image after 3 secconds. Now the new current image is getting displayed without a smooth opacity effect. This looks bad and I want to change that. I want to do it with VueJS but wasn't apple to do it.
At the moment picture 1 is replaced with picture 2. But I would want that picture 2 replaces picture 1 with a transition. From vueJS I found the following:
.fade-enter-active, .fade-leave-active {
transition: opacity .25s ease-in-out;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
and that you can use it within a component, but I didn't quite understand that.
Current code:
const app = new Vue({
el: '#app',
data: {
images: [
'img1.jpg', 'img2.jpg', 'img3.jpg'
],
currentImage: 'img1.jpg',
counter: 0,
loaded: true
},
created() {
let self = this;
setInterval(function () {
self.loaded = !self.loaded;
self.currentImage = self.images[self.counter++];
if (self.counter > self.images.length - 1)
self.counter = 0;
}, 3000);
}
});
template html code:
<div id="app">
<div class="col-avatar">
<div class="prot-image img-fill-container">
<transition name="fade">
<img class="avatar" v-if="loaded" :src="'/caro/' + currentImage"
alt="Avatar">
</transition>
</div>
</div>
</div>
JS fiddle
https://jsfiddle.net/sheyu2rn/
Change .fade-enter, .fade-leave-to to .fade-enter-to, .fade-leave-to:
.fade-enter-active, .fade-leave-active {
transition: opacity .25s ease-in-out;
}
.fade-enter-to, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
So I have the following code:
HTML:
<transition name="slide-left-centered">
<div v-if="test" style="position: fixed; transform: translate(0, 100%)">
test code
</div>
</transition>
CSS:
.slide-left-centered-enter,
.slide-left-centered-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-left-centered-enter-active {
transition: all .3s ease;
}
.slide-left-centered-leave-active {
transition: all .5s ease;
}
If I were to toggle it on and off, it only fades with the opacity but does not move. This works once I remove transform from the HTML.
https://codesandbox.io/s/92mv6ov6xy
I have figured out the problem
This won't work as inline styling takes precedent.
In my real problem, it is using a class which is a child of another class. The reason why it didn't work was because of specificity. I have added !important to the transition class and now it works e.g.
transform: translateX(-100%) !important;