VUE：视图更改时的过渡元素

Question

我遇到了看似最简单的问题，但无法解决。

我的目标很简单：在视图更改时，我想转换新视图的一些元素。不是整个视图，因为我想保留背景，所以 <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>

原样的转换没有任何效果。我尝试在 App.vue 中观看路线以将活动页面作为道具传递并在登陆页面时激活转换，但它没有用。现在我正在尝试更复杂的解决方案，感觉就像我错过了真正简单的方法:(根据我阅读的代码，我应该可以正常工作。

TLDR：我需要在视图更改时转换一些元素，但不是整个路由器视图。

Answer 1

您需要在过渡中使用 v-if 或 v-show，一个数据变量，在此示例中为 "show"，以切换可见性，然后在创建时切换 "show" 变量，或者任何其他操作，例如从 API 返回的数据等

<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>

VUE：视图更改时的过渡元素

VUE :Transition elements on view change

javascript

transition

view

vuejs2