VUE: элементы перехода при изменении вида - PullRequest
Новая
       24

VUE: элементы перехода при изменении вида

0 голосов
/ 23 апреля 2020

У меня есть то, что кажется самой простой из проблем, но я не могу обойти ее.

Моя цель очень проста: при изменении вида я бы хотел перевести некоторые элементы нового Посмотреть. Не весь вид, потому что я хочу сохранить фон на месте, поэтому глобальный переход <router-view> здесь не работает (кстати, он работает).

Вот упрощенная версия код, который у меня есть сейчас: 

<template>
    <div class="fixedBackground">
        <transition name="slideIn">
            <div>
                <h1>Title</h1>
                <p>Subtitle</p>
            </div>
        </transition>
    </div>
</template>

<script>
    export default { 
        name: 'whatever'
    }
</script>

<style scoped>  
    .slideIn-enter-active, .slideIn-leave-active {
    transition: transform .3s ease, opacity .3s ease;
    }
    .slideIn-enter, .slideIn-leave-to {
        transform: translateX(-10vw);
        opacity: 0;
    }
    .slideIn-enter-to, .slideIn-leave {
        transform: translateX(0);
        opacity: 1;
    }
</style>

Переход как таковой не имеет никакого эффекта. Я попытался просмотреть маршруты в приложении. vue, чтобы пропустить активную страницу как реквизит и активировать переход при посадке на страницу, это не сработало. И теперь, когда я экспериментирую с еще более сложными решениями, мне кажется, что мне не хватает действительно простого способа сделать это :( по тому, что я прочитал, мой код должен работать нормально.

TLDR: мне нужно изменить некоторые элементы при изменении вида, но не весь вид маршрутизатора.

1 Ответ

0 голосов
/ 23 апреля 2020

Вам нужно v-if или v-show внутри вашего перехода, переменная данных, в этом примере «show», чтобы переключать видимость, а затем переключать переменную «show» при создании, или любое другое действие, например возвращаемые данные. из API, et c. 

<template>
    <div class="fixedBackground">
        <transition name="slideIn">
            <div v-show="show">
                <h1>Title</h1>
                <p>Subtitle</p>
            </div>
        </transition>
    </div>
</template>


<script>
    export default { 
        name: 'whatever',
        data () {
            return {
                show: false
            }
        },
        mounted () {
            this.show = true;
        }
    }
</script>


<style scoped>  
    .slideIn-enter-active, .slideIn-leave-active {
    transition: transform .3s ease, opacity .3s ease;
    }
    .slideIn-enter, .slideIn-leave-to {
        transform: translateX(-10vw);
        opacity: 0;
    }
    .slideIn-enter-to, .slideIn-leave {
        transform: translateX(0);
        opacity: 1;
    }
</style>
...