4-3 自定义指令与过渡-多元素动画

目录：

  • 多元素动画
  • 练习

一、多元素动画

 目前为止，关于过渡我们已经讲到：多元素动画

  • 单个节点
  • 同一时间渲染多个节点中的一个

那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用 <transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点：

  • 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
  • 过渡模式不可用，因为我们不再相互切换特有的元素。
  • 内部元素 总是需要 提供唯一的 key 属性值。
  • CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

多元素动画语法：transition-group API

<transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOouRight">
    <!--必须要有唯一的key，key值是什么不重要，只要唯一就行了-->
    <p v-show="flag" :key='1'></p>
    <p v-show="flag" :key='2'></p>    
</transition-group>

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入animate.css-->
    <link rel="stylesheet" href="css/animate.css">
    <title>多元素动画</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <button @click="flag=!flag">点我啊</button>
        <hr>
        <!--animated是基础样式，必须要有-->
        <transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOouRight">
            <p v-for="(v,k) in arr" :key="k" v-show="flag">{{v}}</p>
        </transition-group>

    </div>
    <script type="text/javascript" src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data:{
                flag: true,
                arr:['tom','jack','mike','alex','mark']
            }
        })
    </script>
</body>
</html>
多元素动画

二、练习

根据我输入的内容，显示对应的动画，比如我输入a，则显示包含 a字符的动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入animate.css-->
    <link rel="stylesheet" href="css/animate.css">
    <title>多元素动画</title>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <button @click="flag=!flag">点我啊</button>
        <hr>
        <!--animated是基础样式，必须要有-->
        <transition-group enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOouRight">
            <p v-for="(v,k) in arr2" :key="k" v-show="flag">{{v}}</p>
        </transition-group>

    </div>
    <script type="text/javascript" src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data:{
                flag: true,
                arr:['tom','jack','mike','alex','mark']
            },
            computed:{
                arr2:function() {
                    var temp = [];
                    this.arr.forEach(val => {
                        if(val.includes(this.name)){
                            temp.push(val);
                        }
                    });
                    return temp;
                }
            }
        })
    </script>
</body>
</html>

 

posted @ 2020-03-10 10:14  帅丶高高  阅读(255)  评论(0)    收藏  举报