Is there a way that you can use transition between vuejs conditionals v-if and v-else?
As an example:
<transition name="fade">
<p v-if="show">hello</p>
<p v-else>Goodbye</p>
</transition>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
I can't seem to get a transition to work in such a scenario, where, as you toggle show, the <p> elements use a transition between them.
https://jsfiddle.net/fbponh78
Your problem is caused by the fact that vue transition does not see the element change, it only sees the content change.
This is caused by the fact that both elements have the same tag name, so vue just reuses this. To counteract this, give both elements an differed key value:
<p key=1 v-if="show">hello</p>
<p key=2 v-else>Goodbye</p>
Example:
new Vue({
el: '#demo',
data: {
show: true
}
});
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-to {
opacity: 0
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.min.js"></script>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p key=1 v-if="show">hello</p>
<p key=2 v-else>Goodbye</p>
</transition>
</div>
Use two transitions:
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
<transition name="fade">
<p v-if="!show">Goodbye</p>
</transition>
</div>
https://jsfiddle.net/saeedahmadi/fbponh78/10/
I had a problem, where a complex component would make v-else enter before v-if was removed. What helped me was #Khalil's (comments) suggestion:
<transition mode="out-in" ...
Related
I'm using Vue 3 with tailwind and I'm having trouble transitioning between dynamic components. As described in the documentation, I tried the following:
<transition
enter-active-class="duration-500 ease-out"
enter-class="translate-x-full opacity-0"
enter-to-class="translate-x-0 opacity-100"
leave-active-class="duration-500 ease-in"
leave-class="translate-x-0 opacity-100"
leave-to-class="translate-x-full opacity-0"
mode="out-in"
>
<component :is="elementFormat" :key="elementKey" />
</transition>
Where elementFormat obviously refers to the component template that should be rendered. This is a computed property from the vuex store.
Although I can see that elementFormat is updated in the console, the transition won't play, unless I wrap a v-if or v-show around it, and hide it. What am I missing?
Check if you have imported the tailwind css correctly because I have recreated your problem and it seems everything works perfectly,
const Demo = {
data() {
return {
view: 'v-a'
}
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
}
Vue.createApp(Demo).mount('#demo')
.component-fade-enter-active,
.component-fade-leave-active {
transition: opacity 0.3s ease;
}
.component-fade-enter-from,
.component-fade-leave-to {
opacity: 0;
}
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/vue#next"></script>
<div id="demo">
<h3>Vue.js Demo</h3>
<input v-model="view" type="radio" value="v-a" id="a"><label for="a">A</label>
<input v-model="view" type="radio" value="v-b" id="b"><label for="b">B</label>
<transition name="component-fade" mode="out-in">
<component :is="view"></component>
</transition>
<br>
<br>
<h3>Your Code</h3>
<transition enter-active-class="duration-500 ease-out" enter-class="translate-x-full opacity-0" enter-to-class="translate-x-0 opacity-100" leave-active-class="duration-500 ease-in" leave-class="translate-x-0 opacity-100" leave-to-class="translate-x-full opacity-0"
mode="out-in">
<component :is="view" />
</transition>
</div>
I have this issue I've been hitting for hours now; I can't understand why it doesn't work as expected.
I pasted an example code below. The issue is that when editing the name, {{name}} is not updated. However, if I remove either of the <transition> element or the v-if="show" condition, then data binding works as expected. Same if the {{name}} is placed outside the transition.
So it seems the transition blocks data binding? However I don't find anything about it in the docs or elsewere. I tested this code in a Vue2 playground, and it works as expected (data binding works). So the behavior seems to depend on Vue3.
Is there something I'm missing? Is it a bug in Vue3?
Thanks in advance for any input or idea.
<template>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<div v-if="show">
<p>hello, {{name}}</p>
<input v-model="name" type="text" />
</div>
</transition>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
name: "",
show: true,
}
}
});
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.8s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
It works just fine in plain JS...
So try to focus on the differences:
TypeScript (i cannot use it here on SO) - I really doubt its the cause but you can try
Scoped CSS - did you tried to remove scoped ? There are some issues with scoped CSS and <transition>. Check this issue in Vue-loader. My example is not build with Webpack so Vue-loader is not used but it's for sure used in your project...
const app = Vue.createApp({
data() {
return {
name: "",
show: true,
}
},
template: `
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<div v-if="show">
<p>hello, {{name}}</p>
<input v-model="name" type="text" />
</div>
</transition>
</div>
`
}).mount("#app");
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.8s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.js"></script>
<div id="app"></div>
I meet same question, you can try to set the initial value of 'show' to false and at the lifeCycle to modify 'show' for true.
I'm experimenting with vue for the first time.
I've replaced a jquery show/hide that was using .slideDown() / .slideUp() with v-show - however I much prefer the animation of jQuery's slideup/down. Is there an easy way to do this with vue?
Simplified code here:
<nav class="bg-blue" role="navigation">
<div class="container classes here">
<div class="classes here">
<h1 class="classes here">
<a href="/" class="classes here">Site Name
</a>
</h1>
<button class="classes here" #click="isShowing ^= true">
hamburger svg here
</button>
</div>
<div class="main-nav classes here" v-show="!isShowing">
<div class="classes here">
<!-- nav items here -->
</div>
</div>
</div><!-- /.container -->
</nav>
Please advise.
You can install modules for this, or you can write a custom component. I suggest the second option.
<template>
<div>
<button #click="isShowing">
hamburger svg here
</button>
<!-- animation of appearance/disappearance.
More info: https://v2.vuejs.org/v2/guide/transitions.html -->
<!-- The attribute "name" is used to create custom classes
that are applied during animation -->
<transition name="main-nav"
#enter="transitionStep1"
#after-enter="transitionStep2"
#before-leave="transitionStep3"
#after-leave="transitionStep4">
<div class="main-nav" v-show="!active">
<div class="classes here">Some text</div>
</div>
</transition>
</div>
</template>
<script>
export default {
name: "Accordion",
data() {
return {
// set the variable that will hide/show the block
active: false
}
},
methods: {
isShowing() {
// change the value of the variable that will hide/show the block
this.active = !this.active;
},
transitionStep1(el) {
// set the block height at the moment of its appearance
el.style.height = el.scrollHeight + 'px'
},
transitionStep2(el) {
// remove inline styles from the block after animation of its appearance
el.style.height = ''
},
transitionStep3(el) {
// set the height of the block at the beginning of its disappearance animation
el.style.height = el.scrollHeight + 'px'
},
transitionStep4(el) {
// remove inline styles from the block after the animation of its disappearance
el.style.height = ''
},
},
}
</script>
<style lang="scss" scoped>
.main-nav {
overflow: hidden;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.main-nav-enter {
height: 0;
}
.main-nav-leave-to {
height: 0 !important;
}
</style>
My understanding of transitions in vue.js is that you use <transition>
to animate between individual elements and <transition-group> to animate a whole list.
It seems as though if you wanted to animate a transition within a list item you'd use <transition> within the list. e.g. something like this:
<span v-for="item in items">
<transition>
<div>
Transition from this...
</div>
<div>
...to this.
</div>
</transition>
</span>
Yet, when I make that change the animation doesn't work. Is this an expected behavior?
Update: after some tinkering, I have found that my original hypothesis was correct. I was just doing something else wrong. But it's worth noting for anyone else who comes across this problem.
You can use <transition> inside a list if you want to animate individual components of the list.
You use transition groups to transition all children in the same way.
In addition, try setting the transition group before your v-for
new Vue({
el: "#app",
data: {
items : [
{message: 'sometext', id: 1},
{message: 'sometext', id: 2},
{message: 'sometext', id: 3}
],
id : 3
},
methods: {
addItem(){
this.id++
this.items.push({message: 'sometext', id: this.id});
},
enter(){
console.log('transition enter called');
}
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="container">
<button #click="addItem()">Add Item</button>
<transition-group :name="'fade'" v-on:enter="enter">
<span v-for="item in items" v-bind:key="item.id">
{{item.message}}
</span>
</transition-group>
</div>
</div>
I am not exactly sure what you are trying to do with your example.
If you would like to transition a list
<transition-group name="fade" tag="span">
<div v-for="item in items" v-bind:key="item">
{{ item }}
</div>
</transition-group>
If you would like to transition between two items.
<transition name="fade">
<div v-show="whatever === true">
Transition from this...
</div>
</transition>
<transition name="fade">
<div v-show="whatever === false">
...to this.
</div>
</transition>
I have no idea where my code went wrong. It should be a simple transition. When I click the button the message shows correctly, but just that the there is no fade transition happening at all.
<template>
<div>
<transition name="fade">
<message v-show="showMessage" class="tr pop-up-message">
<p slot="header">This is Header</p>
<span slot="body">This is Body</span>
</message>
</transition>
<div v-if="!showMessage" class="block" #click.prevent="showMessage = true">
<a class="button is-primary">Primary</a>
</div>
<div v-else-if="showMessage" class="block" #click.prevent="showMessage = false">
<a class="button is-primary">Primary</a>
</div>
</div>
</template>
<script>
import message from './Message.vue'
export default {
components:{
'message': message,
},
data(){
return{
showMessage: false
}
},
}
</script>
Have you added these CSS as well:
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0
}
I have tried to reproduce your code here with above CSS which works.
I had two <p> tags right next to each other like below
<p v-if="!isControlling">Take control of the camera by clicking</p>
<p v-else>Press <kbd>Esc</kbd> to exit camera. <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> <kbd>Space</kbd> <kbd>Shift</kbd> to move. Mouse to look.</p>
and they just didn't work. It looked like Vue was reusing the same <p> tag in the markup to render both. Adding a key to each made the transition work (thanks #Mark). The fix should look something like below
<p key="asd" v-if="!isControlling">Take control of the camera by clicking</p>
<p key="asf" v-else>Press <kbd>Esc</kbd> to exit camera. <kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> <kbd>Space</kbd> <kbd>Shift</kbd> to move. Mouse to look.</p>