i'm tryin to trigger an animation when a dynamic component change but it doesn't work i appreciate any advice, thanks!
Here's my code:
<transition name="fade" mode="out-in">
<keep-alive>
<Component
:is="camposForm[campoActual].componente"
:label="camposForm[campoActual].label"
/>
</keep-alive>
</transition>
<style lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
opacity: 1;
transition: all .9s;
}
.fade-enter, .fade-leave-to {
transform: translateY(3px);
opacity: 0;
}
</style>
Related
Using Vue transitions, fade works nicely, though trying to use transform: scale(0) doesn't seem to be happening and causes fade to no longer work. Any ideas?
.fade-enter-active, .fade-leave-active {
transition: all .2s ease-in-out;
transform-origin: center center;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
transform: scale(0);
}
Modal
<transition appear name="fade">
<div class="relative z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true" #click="$emit('close-modal')">
Test Div
</div>
</transition>
Thanks
Say I have the following component:
<template>
<q-layout view="lHh lpR lFf">
<q-page-container>
<div class="image-container">
Image Container
</div>
<slot />
</q-page-container>
</q-layout>
</template>
<script lang='ts' setup>
const props = defineProps({
image: { type: String, required: true, default: '' },
});
// console.log(image);
</script>
<style lang="scss" scoped>
.image-container {
display: none;
#media (min-width: $breakpoint-sm-min) {
background: v-bind("props.image") no-repeat left center fixed;
display: block;
background-size: cover;
height: 100%;
width: auto;
}
}
</style>
I can verify that the prop comes through as a string correctly, and according to the docs I can use v-bind to more easily insert dynamic values to the styles.
The image doesn't show up though, and I see this when I open the inspector:
I've also tried variations of wrapping the v-bind inside of url(), but nothing appears to be working. Is this just not yet possible with Vue3?
Note: I am currently using Vue v3.2.29.
Thanks to #tony19 in the comments, we figured out that I wasn't too far off. Essentially, rather than trying to use url() in the css, I've moved that up to the parent that is passing down the prop.
Parent.vue
<template>
<Child :image="`url(${image})`">
...
</Child>
</template>
Child.vue
<template>
<q-layout view="lHh lpR lFf">
<q-page-container>
<div class="image-container">
Image Container
</div>
<slot />
</q-page-container>
</q-layout>
</template>
<script lang='ts' setup>
const props = defineProps({
image: { type: String, required: true, default: '' },
});
</script>
<style lang="scss" scoped>
.image-container {
display: none;
#media (min-width: $breakpoint-sm-min) {
background: v-bind("props.image") no-repeat left center fixed;
display: block;
background-size: cover;
height: 100%;
width: auto;
}
}
</style>
I'm getting the following error while giving transitions to routes,
when trying to get into router-view. Is it because of the div above?
<template>
<div id="nav">
</div>
<router-view v-slot="{Component}">
<transition name="route" mode="out-in">
<component :is="Component"></component>
</transition>
</router-view>
</template>
<style>
.route-enter-from{
opacity: 0;
transform: translateX(100px);
}
.route-enter-active{
transition: all .3s ease-out
}
.route-leave-to{
opacity: 0;
transform: translateX(-100px);
}
.route-leave-active{
transition: all .3s ease-in;
}
</style>
Component template should contain exactly one root element. Put router-view in #nav div and you won't get the errors.
I want a transition in my VueJS 3 project between 2 pages. I have a button and when I click on it, it goes on a new page with a dynamic URL. I would like a transition here. I don't have any errors but there is no transition when I change the page. I don't know why. It's true that initially I didn't had a <router-view/> tag, I had to add it to make the transition, maybe it doesn't use the router-view when it is changing the page so doesn't see the transition.
Here my code :
<template>
<div class="p-grid">
(...)
<div class="p-col" v-if="infoItem.length === 0">
</div>
<div v-else>
<router-link
:to=" {
name:
'Detail',
params: {
id: infoItem.name,
subcategory: infoItem.subcategory,
name: infoItem.name,
},
}">
<Button icon="pi pi-search-plus"></Button>
</router-link>
<router-view v-slot="{ Component }">
<transition name="route" mode="out-in">
<component :is="Component"></component>
</transition>
</router-view>
</div>
</template>
<script>
(
...)
</script>
<style>
.p-grid {
margin: 0.5rem;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
/* Route transition */
.route-enter-from {
opacity: 0;
transform: translateX(100px);
}
.route-enter-active {
transition: ass 0.3s ease-out;
}
.route-leave-to {
opacity: 0;
transform: translateX(-100px);
}
.route-leave-active {
transition: ass 0.3s ease-in;
}
</style>
Do you any idea why ?
Thanks a lot
I'm still pretty new to Vue but I'm trying to apply a transition-group wrapper to a v-for group of divs and there is no impact at all after adding the following.
Is anyone able to see something wrong here?
This is a simplified version of the template:
<template>
<main>
<div class="notes">
<transition-group name="sort" tag="div" appear>
<div v-for="post in posts" :key="post.id">
<SinglePost :post="post" />
</div>
</transition-group>
</div>
</main>
</template>
And the styles tag:
<style scoped>
/* TRANSITION */
.sort-enter-active, .sort-leave-active {
transition: opacity .5s;
}
.sort-enter {
transform: translateY(10px);
opacity: 0;
}
.sort-move {
transition: transform .5 ease-out;
}
</style>