vue-案例:列表动画

最新推荐文章于 2024-01-13 11:11:15 发布

shijiaolong0

最新推荐文章于 2024-01-13 11:11:15 发布

阅读量221

点赞数 1

分类专栏： vue 文章标签： vue-案例:列表动画

本文链接：https://blog.csdn.net/shijiaolong0/article/details/87745508

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <script src="lib/vue.min.js"></script>
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateY(80px);
            }
        .v-enter-active,.v-leave-active{
            transition:all 0.6s ease;
            }
        li{
            border: 1px dashed palevioletred;
            line-height: 20px;
            font-size: 20px;
            margin: 10px;
            width: 100%;
        }
        li:hover{
            background-color: deepskyblue;
            transition: all 2s ease;
        }
        /*删除元素的动画样式*/
        .v-move{
            transition: all 1s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <lable>Id:<input type="text" class="form-control" v-model="id" /></lable>
                <lable>Name:<input type="text" class="form-control" v-model="name" /></lable>
                <input type="button" value="添加" class="btn btn-primary" @click="add" @keyup.enter="add" />
            </div>
        </div>
        <!--<ul>-->
            <!--appear实现页面入场的效果-->
            <!--页面渲染的时候，transition-group会渲染为span,里面放li显然不太好，可以利用tag属性设置渲染的标签，先删掉原来的ul-->
            <transition-group appear tag="ul">
                <!-- v-for渲染出来的元素需要动画用transition-group包裹，不能用transition -->
                <!-- :key必须设置 -->
                <li v-for="(item,index) in list" :key="item.id" @click="del(index)">
                    {{item.id}}---------------{{item.name}}
                </li>
            </transition-group>
        <!--</ul>-->
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    list: [{ id: 1, name: '宝马' }, { id: 2, name: '奔驰' }],
                    id: "",
                    name: ""
                }
            },
            methods: {
                add: function () {
                    var car = { id: this.id, name: this.name };
                    this.list.push(car);
                    this.id = this.name = '';
                },
                del:function(index){
                    this.list.splice(index,1);
                }
            }
        });
    </script>
</body>
</html>

shijiaolong0

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-案例:列表动画

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="lib/bootstrap.min.css"&a
复制链接

扫一扫