Vue过渡动效

Posted 2021-02-27 dzkjz

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

<transition>
  <router-view></router-view>
</transition>

Transition 的所有功能 在这里同样适用。

单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name。

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}

const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：

<!-- 使用动态的 transition name -->
<transition :name="transitionName">
  <router-view></router-view>
</transition>

// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
  ‘$route‘ (to, from) {
    const toDepth = to.path.split(‘/‘).length
    const fromDepth = from.path.split(‘/‘).length
    this.transitionName = toDepth < fromDepth ? ‘slide-right‘ : ‘slide-left‘
  }
}

查看完整例子请移步这里。

UserSettings.vue

<template>
    <div class="us">
        <h2>User Settings {{this.name}}</h2>
        <UserSettingsNav/>
        <transition mode="out-in" :name="transName" :duration="300">
            <router-view class="us__content"/>
        </transition>
        <router-view name="helper" class="us__content us__content--helper"/>
    </div>
</template>

<script>
    import UserSettingsNav from "./UserSettingsNav";

    export default {
        name: "UserSettings",
        props: [‘name‘],
        components: {
            UserSettingsNav,
        },
        data: function () {
            return {
                transName: ‘‘,
            }
        },
        //beforeRouteEnter(to, from, next) {
        // console.log(‘beforeRouteEnter‘);
        // console.log(to.name);
        // console.log(from.name);
        // next(vm => {
        //
        //  });
        //},
        //beforeRouteUpdate(to, from, next) {
        // console.log(‘beforeRouteUpdate‘);
        // console.log(to.name);
        // console.log(from.name);
        // next();
        //},
        //beforeRouteLeave(to, from, next) {
        // console.log(‘beforeRouteLeave‘);
        // console.log(to.name);
        // console.log(from.name);
        // next();
        //},
        // watch: {
        //     ‘$route‘(to, from) {
        //         const toDepth = to.path.split(‘/‘).length;
        //         console.log(toDepth);
        //         const fromDepth = from.path.split(‘/‘).length;
        //         console.log(fromDepth);
        //         this.transName = toDepth < fromDepth ? ‘slide-right‘ : ‘slide-left‘;
        //     }
        // }
        beforeRouteUpdate(to, from, next) {
            const toDepth = to.path.split(‘/‘).length
            //console.log(toDepth);
            const fromDepth = from.path.split(‘/‘).length
            //console.log(fromDepth);
            this.transName = toDepth < fromDepth ? ‘slide-right‘ : ‘slide-left‘
            next()
        }
    }
</script>

<style scoped>

</style>