面包屑引入动画

21 阅读1分钟

blog.csdn.net/qq_61402485… image.png

image.png

                        <transition-group name="breadcrumb">
                            <el-breadcrumb-item v-for="(item, index) in matchedRouter" :key="index">
                                <a :href="item.path">{{ item.title }}</a>
                            </el-breadcrumb-item>
                        </transition-group>
                    </el-breadcrumb>
/* 面包屑过渡动画 */
.breadcrumb-enter-active {
    transition: all 0.4s;
}

.breadcrumb-leave-active {
    transition: all 0.3s;
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
    opacity: 0;
    transform: translateX(20px);
}

.breadcrumb-leave-active {
    position: absolute;
}