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
            }
        },
        created () {
            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>