Vue列表动画练习

最新推荐文章于 2024-05-07 19:22:11 发布

weixin_44552543

最新推荐文章于 2024-05-07 19:22:11 发布

阅读量185

点赞数

本文链接：https://blog.csdn.net/weixin_44552543/article/details/96605386

版权

技术点:transition-group

<!DOCTYPE html>:
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    li {
        border: 1px dashed red;
        margin: 5px;
    }
    li:hover{
        background-color: chartreuse;
        transition: all 0.4s ease;
    }

    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translateY(80px);
    }

    .v-leave-active,
    .v-enter-active{
        transition: all .8s ease    ;
    }
</style>
<body>
<div id="app">
    <div>
        <label>
            Id:
            <input type="text" v-model="id">
        </label>

        <div>
            <label>
                Name:
                <input type="text" v-model="name">
            </label>
            <input type="button" @click="add" value="添加">
        </div>

        <ul>
           <transition-group>
               <li v-for="item in list" :key="item.id">
                   {{item.id}}---{{item.name}}
               </li>
           </transition-group>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    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=''
            }
        }
    })
</script>
</html>
<script>
    import TransitionGroup from "./vue-2.2.0/src/platforms/weex/runtime/components/transition-group";
    export default {
        components: {TransitionGroup}
    }
</script>

weixin_44552543

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue列表动画练习

技术点:transition-group<!DOCTYPE html>:<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> li { borde...
复制链接

扫一扫