必威体育Betway必威体育官网
当前位置:首页 > IT技术

Vue中使用 transition标签或transition-group标签以及第三方类实现动画

时间:2019-09-27 14:14:21来源:IT技术作者:seo实验室小编阅读:57次「手机版」
 

transition

Vue的动画并没有非常炫酷的效果,不过也是有一些实用性的,在项目中有的地方使用,也是能够营造出不同的效果

下面为大家列举两个简单实现动画的例子

使用 <transition> 包裹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script rel="script" src="js/vue-2.4.0.js"></script>

    <!--2. 自定义两组样式,来控制transition 内部的元素实现动画-->
    <style>
        /*v-enter 是进入之前,元素的起始状态*/
        /*v-leave-to 离开之后动画的终止状态*/
        .v-enter,.v-leave-to{
            opacity:  0;/*透明度*/
            transform: translateX(150px);
        }
         /*入场(离场)动画的时间段   */
        .v-enter-active,.v-leave-active{
            transition: all 0.8s ease;

        }


        .my-enter,.my-leave-to{
            opacity:  0;/*透明度*/
            transform: translateY(70px);
        }
        .my-enter-active,.my-leave-active{
            transition: all 0.8s ease;

        }
    </style>
</head>
<body>

    <p id="APP">
        <input type="button" value="toggle" @click="flag=!flag">
        <input type="button" value="toggle2" @click="flag2=!flag2">

        <!--1. 使用transition元素把需要被动画控制的元素,包裹起来-->
        <transition>
            <h3 v-if="flag">这是一个H3</h3>
        </transition>

        <transition  name="my">  <!--区分不同组织间动画-->
            <h6 v-if="flag2">这是一个H6</h6>
        </transition>
    </p>

<script>
    var vm = new Vue({
       el : '#app',
       data : {
           flag : false,
           flag2 : false,
       },
       methods : {

       },
    });

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

使用 <transition-group> 包裹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script rel="script" src="js/vue-2.4.0.js"></script>

    <link rel="stylesheet" href="css/animate.css">

    <style>
        li{
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            font-size: 14px;
            padding-left: 5px;
            width: 100%;
        }

        li:hover{
            background-color: hotpink;
            transition: all 0.5s ease;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active,.v-leave-active{
            transition: all 0.6s ease;
        }

        /*v-move 和 v-leave-active 配合使用,能够实现列表后续的元素,渐渐地漂上来的效果 */

        .v-move{
            transition: all 0.6s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
    <p id="app">
        <p>
            <label>
                ID:
                <input type="text" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>

            <input type="button" value="添加" @click="add">
        </p>



       <ul>
           <!--在实现列表过渡时,如果需要过渡的元素是通过v-for渲染出来的,不能使用
           transition 包裹,需要使用 transition-group -->

           <!--若需要为 v-for 循环创建的元素设置动画,必须为每一个元素设置 :key 属性-->
           <transition-group>
               <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                   {{ item.id }} --- {{ item.name }}
               </li>
           </transition-group>
       </ul>
    </p>


    <script>
        var vm = new Vue({
            el : '#app',
            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});
                    this.id = this.name = '';
                },
                del(i){
                    this.list.splice(i,1);
                },
            }
        });
     </script>
</body>
</html>

使用 第三方类实现动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script rel="script" src="js/vue-2.4.0.js"></script>

    <link rel="stylesheet" href="css/animate.css">

    <!--入场 bounceIn   离场 ounceOut-->
</head>
<body>b
    <p id="app">
        <input type="button" value="toggle" @click="flag=!flag">

        <!--<transition enter-active-class="animated bounceIn"
                   leave-active-class="animated bounceOut">
            <h3 v-if="flag">坏蛋,坏蛋,大坏蛋~~~</h3>
        </transition>-->

        <!--<transition enter-active-class="bounceIn"
                    leave-active-class="bounceOut" :duration="200">
            //:duration="毫秒值" 统一设置入场和离场时间为 400ms          
               <h3 v-if="flag" class="animated">坏蛋,坏蛋,大坏蛋~~~</h3>
        </transition>-->

        <transition enter-active-class="bounceIn"
                    leave-active-class="bounceOut"
                    :duration="{ enter: 200, leave: 2000 }"><!--分别设置时间-->

            <h3 v-if="flag" class="animated">坏蛋,坏蛋,大坏蛋~~~</h3>
        </transition>
    </p>




    <script>
        var vm = new Vue({
            el : '#app',
            data : {
                flag : false,
            },
            methods : {

            },
        });

    </script>

</body>
</html>

不过这样使用的话,会有一些瑕疵,运行检查代码

这里写图片描述

大家可以看到 ul>span标签里 放的是块级 li元素 ,这是不符合标准的,所以应修改代码如下:

          <!-- 【appear】 给 transition-group 添加入场效果-->
          <!--
            通过 tag 属性,指定transition-group 渲染 为指定的元素
            若不指定,则默认为渲染为 span 标签
           -->
           <transition-group appear tag="ul">
               <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                   {{ item.id }} --- {{ item.name }}
               </li>
           </transition-group>

代码运行如下:

这里写图片描述

这样就OK啦~~

相关阅读

Kali中间人攻击(原理)

中间人的攻击手段(利用漏洞) 攻击基本原理 中间人攻击原理:利用ARP协议没有认证机制,并且取最后一条信息作为最新的mac信息假如小明

Android开发中libs和jinLibs文件夹的作用详解

前言 相信各位Android开发中们在Android 开发中经常和这两个文件夹打交道,以前一直迷迷糊糊的使用,没去想过。最近遇到了一些问题,仔

在trados中翻译ppt、excel文件

ppt 文件的翻译:1.打开trados workbench2.打开tageditor3.将文件拖入tageditor4.运行workbench ,翻译5.翻完后,打开workbench 中的to

中秋节微信电子贺卡怎么制作?

中秋节微信电子贺卡怎么制作?中秋节到了,想必大家都会发一些短信或者中秋微信祝福吧,其实我们可以做一个中秋节微信电子贺卡来更好

Linux中apt与apt-get命令的区别与解释

原文出处:https://www.sysgeek.cn/apt-vs-apt-get/Ubuntu 16.04 发布时,一个引人注目的新特性便是 apt 命令的引入。其实早在 2014

分享到:

猜你喜欢

    Warning: mysql_query(): Unable to save result set in E:wwwwww.seotesttools.comeclassdb_sql.php on line 20 SQL Error: select id,classid,ttid,onclick,plnum,totaldown,newspath,filename,userid,username,firsttitle,isgood,ispic,istop,isqf,ismember,isurl,truetime,lastdotime,havehtml,groupid,userfen,titlefont,titleurl,stb,fstb,restb,keyboard,title,ftitle,newstime,titlepic,smalltext,diggtop from ***_ecms_news order by rand() limit 6

栏目导航

推荐阅读

热门阅读