0
点赞
收藏
分享

微信扫一扫

【Vue】动画

登高且赋 2022-02-09 阅读 66

动画组件

transition 标签

  • transition 标签:Vue 的内置动画标签,配合 CSS 样式使用,实现动画效果
    transition 标签只能包含一个元素,如果里面写了多个元素,则只生效第一个
  • transition 包裹的标签需要设置 v-show / v-if 属性控制元素的显示
  • name 属性:用于自动生成 CSS 过渡类名。eg:name="fade" 将自动拓展为 .fade-enter… 默认为 "v"
  • appear 属性:一开始就生效显示动画
  • 进入:.v-enter:始状态、.v-enter-to:末状态、.v-enter-active:进入动画
  • 离开:.v-leave:始状态、.v-leave-to:末状态、.v-leave-active:离开动画

在这里插入图片描述

  • 如果 transition 标签没有设置 name 属性,则对应的类名为 v-XXX
    如果设置了 name 属性,则对应的类名为 属性值-XXX
<template>
    <div id="app">
        <button @click="bol = !bol">隐藏/显示</button>
        <!-- 内置的组件 transition -->
        <transition appear>
            <!-- appear:一开始就生效进入的动画 -->
            <h1 v-show="bol">子组件动画</h1>
            <!-- 通过 v-show 显示标签 -->
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            bol: true,
        };
    },
};
</script>

<style>
/* 进入:始状态 */
.v-enter {
    transform: translateX(-100%);
}
/* 进入:末状态 */
.v-enter-to {
    transform: translateX(0);
}
/* 进入动画 */
.v-enter-active {
    transition: 1s;
}

/* 离开:始状态 */
.v-leave {
    transform: translateX(0);
}
/* 离开:末状态 */
.v-leave-to {
    transform: translateX(-100%);
}
/* 离开动画 */
.v-leave-active {
    transition: 1s;
}
</style>
  • 也可以将 transition: 1s; 绑定到标签上
h1 {
    transition: 1s;
}

/* 进入:始位置 */
.v-enter {
    transform: translateX(-100%);
}
/* 进入:末位置 */
.v-enter-to {
    transform: translateX(0);
}

/* 离开:始位置 */
.v-leave {
    transform: translateX(0);
}
/* 离开:末位置 */
.v-leave-to {
    transform: translateX(-100%);
}
<template>
    <div id="app">
        <button @click="bol = !bol">隐藏/显示</button>
        <!-- 内置的动画组件 transition -->
        <transition name="hello" appear>
            <!-- appear:一开始就生效进入的动画 -->
            <h1 v-show="bol">子组件动画</h1>
            <!-- 通过 v-show 显示标签 -->
        </transition>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            bol: true,
        };
    },
};
</script>

<style>
/* 进入中动画过程生效 */
.hello-enter-active {
    animation: moveH 1s linear reverse;
}

/* 离开中动画过程生效 */
.hello-leave-active {
    animation: moveH 1s linear;
}

/* 设置动画的关键帧 */
@keyframes moveH {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
</style>

transition-group 标签

  • transition 标签只能包含 1 个元素,transition-group 标签可以包含多个元素
  • transition-group 需要配合 key 属性使用,否则 Vue 为了效率只会替换相同标签内部的内容
<template>
    <div id="app">
        <button @click="isEditing = !isEditing">切换</button>
        <transition-group appear>
            <h1 v-if="isEditing" key="save">Save</h1>
            <h1 v-if="!isEditing" key="edit">Edit</h1>
        </transition-group>
    </div>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            isEditing: true,
        };
    },
};
</script>

<style>
h1 {
    transition: 0.5s;
    position: absolute;
}
.v-leave {
    opacity: 1;
}
.v-leave-to {
    opacity: 0;
}
.v-enter {
    opacity: 0;
}
.v-enter-to {
    opacity: 1;
}
</style>

也可以通过给同一个元素的 key 设置不同的状态来代替 v-ifv-else,上面的例子可以重写为:

        <transition>
            <h1 :key="isEditing">
                {{ isEditing ? "Save" : "Edit" }}
            </h1>
        </transition>

动画库的使用

  1. 下载:npm install animate.css --save
  2. 引入:import 'animate.css';
  3. 给指定的 transition 标签设置 name 属性 animate_animateanimate_自定义名称
<template>
    <div id="app">
        <button @click="bol = !bol">隐藏 / 显示</button>
        <transition
            appear
            name="animate__animated animate__bounce"
            enter-active-class="animate__bounceIn"
            leave-active-class="animate__bounceOut"
        >
            <h1 v-show="bol">动画库的使用</h1>
        </transition>
    </div>
</template>

<script>
import "animate.css"; // 引入动画库

export default {
    name: "App",
    data() {
        return {
            bol: true,
        };
    },
};
</script>
举报

相关推荐

0 条评论