您现在的位置是:首页 >学无止境 >vue集成animate.css网站首页学无止境

vue集成animate.css

Dormiveglia-flx 2023-07-15 12:00:02
简介vue集成animate.css

<transition> 标签的用法

  1. 使用<transition></transition>标签包裹要加动画的元素。

  2. 标签中添加属性name,表示执行动画的名字,不加默认为v

  3. 如果没使用属性name,设置动画需要用:

    进入:.v-enter 进入的起点.v-enter-to 进入的终点.v-enter-active 进入的过程(Vue2)
    离开:.v-leave 离开的起点.v-leave-to 离开的终点.v-leave-active 离开的过程(Vue2)

  4. 如果有name属性,设置动画用:

    进入:.name值-v-enter 进入的起点.name值-enter-to 进入的终点.name值-enter-active 进入的过程(Vue2)
    离开:.name值-leave 离开的起点.name值-leave-to 离开的终点.name值-leave-active 离开的过程(Vue2)

  5. 标签中添加属性appear,值为布尔值true/false,表示是否在初始化时就执行动画

// 没有加name属性

<template>
    <div>
        <button @click="bol = !bol">隐藏/显示</button>
        <!-- Vue 的内置动画标签 transition -->
        <transition>
          
            <h1 v-show="bol">组件动画效果</h1>
           
        </transition>
    </div>
</template>

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

<style>
/* 进入动画 */
.v-enter-active {
    animation: move 1s;
}

/* 离开动画 */
.v-leave-active {
    animation: move 1s reverse;
}

@keyframes move {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translate(0);
    }
}
</style>

// 加上name属性,并且加上appear属性

<template>
    <div>
        <button @click="bol = !bol">隐藏/显示</button>
        
        <!-- 动画会在一开始便生效 -->
        <transition name="moveCartoon" appear>
            
            <h1 v-show="bol">组件动画效果</h1>
            
        </transition>
    </div>
</template>

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

<style>
/* 类名要对应回 name 的属性值 */
.moveCartoon-enter-active {
    animation: move 1s;
}
.moveCartoon-leave-active {
    animation: move 1s reverse;
}

@keyframes move {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translate(0);
    }
}
</style>

二 关于animate.css

介绍animate.css 常用的几种分类

  1. Attention seekers:用于引人注目的动画,比如刚进一个网站,要凸显的某个地方,可以用这个动画。
  2. Bouncing entrances 与 Bouncing exits 弹跳入场与弹跳出场的动画。
  3. Fading entrances 与 Fading exits 淡入浅出的动画
  4. Rotating entrances 与 Rotating exits 旋转入场与旋转出场的动画
  5. Zooming entrances 与 Zooming exits 缩放入场与缩放出场的动画
  6. Sliding entrances 与 Sliding exits 侧边划入与侧边划出的动画

三 vue集成animate.css

  1. npm i animate.css
  2. 在main.js 中 引入 import ‘animate.css’;

使用

  1. <transition name="animate__animated animate__bounce"> 固定配置上name="animate__animated animate__bounce"
  2. 通过enter-active-classleave-active-class实现不同样式配置,这两个的属性的值就是animate.css官网中样式的名称。
    在这里插入图片描述

例如:

<transition 
	name="animate__animated animate__bounce" 
	enter-active-class="animate__swing" 
	leave-active-class="animate__fadeOutTopLeft"
>
...
</transition>


风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。