Transition in VueJS when data change don't work

Question

I have a problem to understand how to work with Transitions and state change in Vue.

Tihs is my component :

<template>
<section id="place" class="row">
    <transition class="fade">
        <div v-if="place" id="place-title" class="w-100 d-flex justify-content-center bg-dark text-white">
            <h1>{{ place.name }}</h1>
        </div>
    </transition>
    <div id="place-picture">
        <img class="img-fluid" src="https://www.fillmurray.com/394/221">
    </div>
    <div id="place-description" class="pt-3 pb-3 p">
        <p class="text-justify mb-0" style="font-size: small"><span>{{ place.abstractDescription }}</span>
            <strong>Lire plus</strong>
        </p>
    </div>
</section>

<script>

    export default {
        name: "place",
        props: [],
        computed: {
            place() {
                return this.$store.getters.place
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }
</style>

The transition don't work when the data of Place change. I don't figure why ...

Thanks a lot !

Try with v-bind:class="{ fade: place }"

MedaiP90
– MedaiP90

2020-03-06 15:41:09 +00:00
Commented Mar 6, 2020 at 15:41 — MedaiP90
– MedaiP90, Commented Mar 6, 2020 at 15:41

Intae Lall · Accepted Answer · 2020-03-06 15:47:34Z

1

The data for place is inside the tags, and the transition will apply depending on whether the element inside (the div inside transition) is inserted or removed,, which it isn't, as only the data for place is changing. I'm also guessing that place may be already initialised in the state, so the transition will only run again if the value of place is null and then populated - depending on whether it's true from v-if="place". Setting the place to null in the computed property if it's empty in the store may solve your issue.

answered Mar 6, 2020 at 15:47

Intae Lall

112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kaiserik Over a year ago

You're right et thanks to explain the behabiour. My problem is the computed property is never null. Because there is a initialised value in the store for the loading and after that, if a change the place, the data is always set for something :/

Collectives™ on Stack Overflow

Transition in VueJS when data change don't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related