<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

<body>

    <style>

        ul li{

            width: 300px;

            text-decoration: none;

            margin: 5px 0px;

            border: 1px solid black;

        }

        ul li{

            list-style: none;

        }

        ul li:hover{

            background-color: hotpink;

        }

/* 过度类动画 */

    /* 动画进入前  元素移动到Y轴80px 不透明 离开后还会移动到80px这里操作就是translate

    说明  如果定义rotate  那就在enter-active  是旋转的效果*/

    .v-enter,

    .v-leave-to {

      opacity: 0;

      transform: rotate(180deg);

    }

    /* 开始动画的时候，动画会移动到原来的位置 执行过度效果*/

    .v-enter-active,

    .v-leave-active {

      transition: all 0.6s ease;

    }

    </style>

    <div class="container">

        <div>

                <label for="">

                        Id:

                        <input type="text"  v-model="id" >

                    </label>

                    <label for="">

                            Name:

                            <input type="text" v-model="name" >

                    </label>

                        <input type="button" value="添加" v-on:click="add">

        </div>

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

        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->

       <!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->

       <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->

       <!-- transition-group中也可以写钩子函数 但是有点问题  我还没解决 -->

       <!--v-on:before-enter="beforeEnter"

          v-on:enter="enter"

          v-on:after-enter="afterEnter"  -->

        <transition-group appear tag="ul"

        >

                <li v-for="(item, index) in listName" :key="item.id"

                @click="del(index)">{{item.id}}---------{{item.name}}--------{{item.number}}

        </li>

        </transition-group>

    </div>

    <script>

        var vm=new Vue({

            el:'.container',

            data:{

                id:'',

                name:'',

                listName:[

                    {id:'1',name:'时尚网吧',number:'2019'},

                    {id:'2',name:'怪兽电竞',number:'2017'},

                    {id:'3',name:'银河网络',number:'2017'}

                ]

            },

            methods: {

                // 添加函数

                add(){

                    this.listName.push({id:this.id,name:this.name,number:'2019'});

                    this.id=this.name='';

                },

                // 删除函数

                del(i){

                    this.listName.splice(i,1);

                },

                // // 动画生命周期函数

                // beforeEnter(el){

                //     el.style.transform="translateY(80px)";

                //     el.style.opacty=0

                // },

                // enter(el,done){

                //     el.offsetHeight

                //     el.style.transition="all 0.4s ease"

                //     done()

                // },

                // afterEnter(el){

                //     el.style.transform="translateY(0)"

                // },

            },

        })

    </script>

</body>

</html>

Vue列表动画----自己做的的更多相关文章

  1. Vue 列表动画实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue列表过渡

    前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...

  3. 从零开始学 Web 之 Vue.js（五）Vue的动画

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. vue用mand-mobile ui做交易所移动版实战示例

    vue用mand-mobile ui做交易所移动版实战示例 先展示几个界面: 目录结构: main.js // The Vue build version to load with the `impo ...

  5. vue的动画组件（transition）

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...

  6. WPF实现QQ群文件列表动画（二）

    上篇(WPF实现QQ群文件列表动画(一))介绍了WPF实现QQ群文件列表动画的大致思路,结合我之前讲过的WPF里ItemsControl的分组实现,实现起来问题不大,以下是效果图: 其实就是个List ...

  7. 使用Vue+Django+Ant Design做一个留言评论模块

    使用Vue+Django+Ant Design做一个留言评论模块 1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下 ...

  8. VUE3 之 列表动画 - 这个系列的教程通俗易懂，适合新手

    1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1  列表中增加和删除元素 <style> .my-ite ...

  9. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

随机推荐

  1. 转 Zabbix 3.2.6通过SNMP和iDRAC监控DELL服务器

    https://www.cnblogs.com/saneri/p/7772641.html

  2. Swift编码总结1

    1. fileprivate (set) var hasSetDiscount = false中fileprivate (set)表示什么意思: //设置setter私有,但是getter为publi ...

  3. 【PromQL】prometheus查询语言

    常用查询: https://songjiayang.gitbooks.io/prometheus/content/exporter/nodeexporter_query.html group by 操 ...

  4. Mathjax与LaTex公式简介

    MathJax与LaTex公式简介 (转载) PS: 原文链接写的非常好!!! 博主写这篇文章,一是为了防止原链接失效,二是在cnblogs上测试MathJax; 本文从math.stackexcha ...

  5. LODOP打印表格错位的几种情况

    在网页设计中,表格经常用到百分比,表格在浏览器中展示,这个百分比是相对于浏览器的.还有div,各种浮动之类的相对位置,也有的用到百分比.而在LODOP打印中,百分比是相对于纸张的.LODOP中打印项的 ...

  6. PHP5.2\5.3 Xdebug 调试器配置及应用

    PHP5.2添加的扩展方式:zend_extension_ts=D:\www\Server\php5\ext\php_xdebug-2.1.0-5.2-vc6.dll PHP5.3添加的扩展方式:ze ...

  7. k8s nfs

    1 yum install -y nfs-utils-* 2 mkdir /home/data 3 vim /etc/exports /home/data 10.0.0.0/24(rw,async,n ...

  8. 039 Android SQLite数据库(了解)

    1.介绍 注意:当有大量相似结构的数据需要存储的时候,需要使用数据库. 2.SQLiteOpenHelper简介 注意:数据库的创建方法总结: (1)定义一个类继承SQLiteOpenHelper o ...

  9. 长乐培训Day8

    T1 远征 题目 [题目描述] 寒枫将军将要带领他的部队去圣雪山消灭那里的冰龙.部队分成了若干个小队,属于同一个小队的人兵种相同. 寒枫将军有着杰出的指挥能力,在战斗的时候,寒枫将军能够让所有相同兵种 ...

  10. php面向对象之封装

    OOP三大特性:封装.继承和多态,简称封继态. 封装 类2使用关键字extends继承类1,之后,类1为类2的父类,简称父类,类2是类1的子类,简称子类.使用关键字new,实例化类1,得到对象1,对象 ...