VUE2.X全教程（四）--CSS动画

最新推荐文章于 2024-11-12 16:12:13 发布

无~痕

最新推荐文章于 2024-11-12 16:12:13 发布

阅读量605

点赞数

分类专栏：前端 Vue.js 文章标签： Vue动画基础 Vue基础

本文链接：https://blog.csdn.net/qq_27820551/article/details/86670419

版权

本章主要内容

1.：动画原理

2.vue的animate.css 及keyfram动画

3.Vue中的组件和元素动画

4.Vue中的列表动画

5.Vue中的动画封装

1.动画原理

要想让标签具有动画效果，需要在最外层包裹一个transition标签，当元素被transition包裹的时候，Vue会分析这个元素的CSS样式，构建一个动画的流程

在动画执行之前，VUE会往内部的元素中，增加两个class 名字 fade-enter 和 fade-enter-active , 当动画执行第二帧之后会将之前的fade-enter 删掉，然后增加一个 fade-enter-to 名字的class，当动画运行结束的时候，会将fade-enter-active 和fade-enter-to删除掉，如果没有写name元素，默认是以v开头

<style>
        /*初始值和最后变成的状态*/
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }
        /*添加过渡监听和时间 默认以v-开头，可以指定名称*/
        .fade-enter-active,.fade-leave-active{
            transition: opacity 3s;
        }
    </style>
</head>
<body>
        <div id="app">
            <!--用transition包裹使之Vue在使用过渡时自动给它添加类-->
            <transition name="fade">
            <div v-if="show">hello world</div>
            </transition>
            <button @click="handleClick">点击</button>
        </div>
<script>
        var  vm = new Vue({
            el:'#app',
            data:{
                show:true
            },
            methods:{
                handleClick:function(){
                    this.show= !this.show;
                }
            }
        });

2.在Vue中使用animate.css库

步骤：1下载animate.css 文件

2.将animate.css引入项目中 3.修改默认的入场class 和出厂class 改为以 animated开头后面接要使用的动画效果的class 名字

  <style>
        <!-- 在Vue中使用CSS中的动画效果-->
        @keyframes big-small {
            0%{
                transform: scale(0);
            }
            50%{
            transform: scale(1.5);
        }
            100%{
                transform: scale(1);
            }
        }
        .fade-enter-active{
            transform-origin: left center;
            animation: big-small 1s;
        }
        .fade-leave-active{
            transform-origin:

最低0.47元/天解锁文章