vue中过渡动画与keyframe动画、以及使用animate.css和列表过渡

一、过渡动画

(1)无论是组件之间的切换,或者用v-if,v-show指令控制dom的显示,只要是你想实现动画效果,必须在外面包裹,且必定给一个name属性,用于指定使用定义好的动画

 <div id="root">
        <transition name="fade">
            <component :is="type">component>
        transition>
        <button @click="change">changebutton>
 div>

(2)开始进行定义动画,因为前面的name是fade,所以后面的动画定义的类名,必须按照fade开头。

 <style>
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 3s;
        }
 style>

(3)实现效果

vue中过渡动画与keyframe动画、以及使用animate.css和列表过渡_第1张图片

二、keyframe动画

(1)还是使用transiton包裹,也给一个name,但是在css定义动画有所不同。
keyframe动画与过渡动画不同点在于,keyframe是一种插帧动画,我们可以定义在不同帧时候的动画,这里我们只在0%,50%,100%处定义,大家可以在中间多定义一些

(2)定义动画

<style>
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .fade-enter-active,
        .fade-leave-active {
            transform-origin: left center;
            animation: bounce-in 3s;
        }
    style>

(3)实现效果

vue中过渡动画与keyframe动画、以及使用animate.css和列表过渡_第2张图片

三、使用animate.css库

(1)之前都是使用name=“fade”,定义动画时候写一大堆,我们当然可以反过来,在name里面写一大堆,在定义时候写少一点。并且使用animate.css必须这样写。

①transition标签里面这样写

<div id="root">
        <transition enter-active-class="enter" leave-active-class="leave">
            <component :is="type">component>
        transition>
        <button @click="change">changebutton>
    div>

②定义动画这样写

<style>
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .enter,
        .leave {
            transform-origin: left center;
            animation: bounce-in 3s;
        }
    style>

效果和之前一模一样

(2)学会怎么改写name之后,我们可以使用animate.css库,这里说明以下,animate.css是属于用@keyframe动画一种,不是使用的过渡动画。

①引入库,我是采用CDN方式

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />

②在transition标签中使用

<div id="root">
        <transition enter-active-class="animated bounce" leave-active-class="animated shake">
            <component :is="type">component>
        transition>
        <button @click="change">changebutton>
div>

animated必写,后面是动画的类型

四、列表过渡

使用trasition-group就好啦

 <div id="root">
        <transition-group enter-active-class="enter" leave-active-class="leave">
            <div v-for="item of list" :key="item.index">{{item.index}}---{{item.content}}div>
        transition-group>
        <button @click="change">changebutton>
    div>

结果

vue中过渡动画与keyframe动画、以及使用animate.css和列表过渡_第3张图片

你可能感兴趣的:(vue基础)