<!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. VMware 快速克隆出多个 Linux centos7 环境

    这样一台系统就已经克隆好了,但是,现在还没有完,因为是克隆的,里面的ip地址和创建的主机名都是一样,需要进行修改 登录服务器,然后使用 [ifcfg-ens33需根据实际情况而定] vi /etc/s ...

  2. 通过直方图进行PCA准备

    import graphviz import mglearn from mpl_toolkits.mplot3d import Axes3D from sklearn.datasets import ...

  3. Laya的场景以及场景的加载

    参考: Laya项目发布详解 Laya2.0 内嵌模式.加载模式.分离模式.文件模式的场景加载创建和场景打开关闭 版本2.1.1.1 白鹭中的场景是exml制作,发布后exml代码都会打包到defau ...

  4. php调用webservice报错Class 'SoapClient' not found（转）

    php在调用webservice时,报告如下类似错误: ( ! ) Fatal error: Class 'SoapClient' not found in E:/WebSrv/CI/system/l ...

  5. C#DbHelperOleDb,Access数据库帮助类 （转）

    /// <summary>/// 编 码 人:苏飞/// 联系方式:361983679  /// 更新网站:[url=http://www.sufeinet.com/thread-655- ...

  6. Jackson解析自定义json到实体类

    json文本 { "status": 0, "result": { "final": true, "hypotheses" ...

  7. DELPHI (VCL及FMX[Firemonkey])启动时的欢迎窗口实现代码

    VCL里面的的实现 program ZhouFamily; uses Vcl.Forms, Winapi.Windows, FrmZhouFamilyMainU in 'FrmZhouFamilyMa ...

  8. Vue cli4.0 代理配置

    proxy: { '/service': { target: 'http://192.168.40.243:3000/', //对应自己的接口 changeOrigin: true, ws: true ...

  9. Appium移动自动化测试-----（十）appium API 之上下文操作

    其实上下文的操作主要针对于混合应用.啥是混合应用,简单来说就是APP用里面嵌入网页.Android上的浏览器就属于混合应用. 1.获取当前上下文 方法: getContext() 获取当前所有的可用的 ...

  10. PHP实现单点登录最简单的方法

    PHP实现单点登录最简单的方法 用户在A登录 存入登录状态 登录B站(A的识别要传入B) 获取A的登录状态