Vue动画工具及特效

vue动画部分，这部分难度主要在于动画代码的固定形式，比较繁琐复杂，举出几个实例。

1.单元素/组件的过渡

资源包：

<script src="node_modules/vue/dist/vue.js"></script>

body部分：

1.若想反复点击实现隐藏/出现状态循环交替，再标签内设置v-if=“flag”,在data中设置flag=false/true（false代表初始成隐藏标签，true为显示标签），在触发点击事件的标签上添加：@click=flag=!flag，即每次点击呈现相对立的状态。
2.transition标签包裹需要被动画控制的元素。
3.若代码页中有多个不同的动画效果，可以给transition标签命名，也就是属性name=""，并与style中的选择器连用（具体操作样式部分说。）


<body>
<div id="root">


    <button @click="flag=!flag">点点点</button>
    //transition包裹需要被动画控制的元素
    //再vue中，transition可以是一个标签（元素）
  <transition>
    <h1 v-if="flag">王阿赫</h1>
  </transition>
   <transition name="my">
    <h1 v-if="!flag">安小瓜</h1>
  </transition>
</div>

<script>

    new Vue({
        el: "#root",
        data: {
            flag:false

        },
        methods: {}
    })
</script>
</body>

style部分：

1.v-enter和v-leave-to分别代表动画进入和离开终止时的状态，是两个时间点。（元素此刻的效果）
.v-enter和.v-leave-to 分别代表入场动画和离场动画的动画，是两个时间段。（元素所需完成的动画）
2.若body中的transition给出name名，则将选择器中的"v"替换成”name名“。

    <style>

        /*.v-enter,.v-leave-to 是一个时间点
            enter是还没进入时的状态
            leave-to：动画离开之后的终止状态*/
         .v-enter,.v-leave-to{
             opacity: 0;
            transform: translateX(100px);
             color:red;
         }
        /*入场动画和离场动画的时间段*/
        .v-enter-active,.v-leave-active{
            transition:all 1s linear;

        }
        .my-enter,.my-leave-to{
            opacity: 0;
            transform: translateY(200px);
            color:blue;
        }
        .my-enter-active,.my-leave-active{
            transition:all 1s linear;

        }
    </style>

2.第三方动画库

资源包：

.需要引入animate资源包（下载方式：npm i animate命令）

  <script src="node_modules/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="node_modules/animate.css/animate.css">

body部分（无css样式）

1.打开网址;https://daneden.github.io/animate.css/ 可选择自己想用的样式，复制动画名称。
2.进入页面立即执行动画：在要付给动画的标签后添加class=“animated+想用的样式名”。
3.给元素一个进场动画和一个离场动画：

进场： enter-active-class=“animated+动画名”

离场： leave-active-class=“animated+动画名”

4.动画时常： :

duration="{enter:xx毫秒,leave:xx毫秒}" (分别代表入场和离场动画时长)

:duration=“200”（入场和离场动画时长均为200毫秒）

<body>
<div id="root">
    <div class="animated fadeInDownBig">1111</div>
    <button @click="flag=!flag">按钮</button>
  //进入时rotateIn动画，出来是rotateOut
  <transition
	   enter-active-class="animated slideInRight"
       leave-active-class="animated slideInRight"
       duration="{enter:200,leave:400}"
    >
  <h2 v-if="flag">这是一个h2</h2>
    </transition>

</div>
<script>
  new Vue({
   el: "#root",
   data: {
         flag:true,
        },
    methods: {}
    })

</script>
</body>

3.商品进入购物车轨迹

资源包：

<script src="node_modules/vue/dist/vue.js"></script>

样式部分：

设置模拟商品的小球

  .ball{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: lawngreen;
        }

body部分：

1.在动画中一般分为3个阶段：初始状态->变化过程->结束状态，所以在 methods中，我们设置了3个函数，beforeEnter(el){} => enter(el,done){}=> afterEnter(el){}，与上面阶段一一对应。
2.在enter函数中，必须加入“el.offsetWidth”这句代码，无实际意义，但不加无法看到动画运动轨迹。
3.在script部分设置的函数，要绑定到transition标签中，以下为绑定方式：

<transition @before-enter=“beforeEnter”
@enter=“enter”
@after-enter=" afterEnter">

<body>
<div id="root">
<input type="button" value="小猪佩奇" @click="flag=!flag">
<transition @before-enter="beforeEnter"
            @enter="enter"
            @after-enter=" afterEnter">
        <div class="ball" v-if="flag"></div>

    </transition>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            flag:false
        },
   methods: {
   //动画钩子函数的el 依旧是原生的dom对象
    beforeEnter(el){
    el.style.transform="translate(0,0)";
       },

    //done其实就是调用afterEnter
    enter(el,done){
    //加上去就显示运动过程，无实际意义
    el.offsetWidth

    el.style.transform="translate(200px,350px)";
    el.style.transition="all 1s ease";

     done();
     },
  afterEnter(el){
	this.flag=!this.flag
     }
        }
    })

</script>
</body>

4.transition-ground（多元素控制）

当你想要控制多个元素呈现相同动画时，用一个transtision标签包裹是不好用的，需要使用<transition-ground>标签进行包裹。

1.在transition / transition-ground中添加属性appear：在点开/刷新页面时即显示所添加的动画
2.在transition / transition-ground中添加属性tag：在渲染transition包裹的元素时，会默认在外部生成一个span标签，使用tag可以修改默认标签，例如：tag=“ul”,即嵌套了一个<ul>标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
    <style>
        li{
            border:1px solid lightgray;
            margin-bottom: 5px;
            font-size: 20px;
            padding-left: 20px;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateY(200px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 0.6s linear;
        }

    </style>
</head>
<body>

<div id="root">
    <div>
        <label>ID</label>
        <input type="text" v-model="id">
        <label>Name</label>
        <input type="text" v-model="name">
        <button @click="add">添加</button>
    </div>
    <!--<ul>-->
 // 设置tag属性，指定transition-group渲染的元素，如果不指定默认为span标签
 //transition-group appear需要添加appear实现入场动画-->
    <transition-group appear tag="ul">
        <li v-for="(item,index) in list" :key="item.id" @click="del(index)">
            {{item.id}}-----{{item.name}}
        </li>
    </transition-group>
    <!--</ul>-->
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            id:"",
            name:"",
            list:[
                {id:1,name:"马伊琍"},
                {id:2,name:"姚晨"},
                {id:3,name:"范冰冰"},
                {id:4,name:"赵薇"}
            ]
        },
        methods: {
            add(){
                this.list.push({id:this.id,name:this.name})
            },
            del(index){
                this.list.splice(index,1)
            }
        }
    })


</script>
</body>
</html>

88！

在这里插入图片描述

来源：CSDN

作者：王阿赫

链接：https://blog.csdn.net/weixin_43287506/article/details/84865347

标签

vue

transition

动画

动漫

flag