<!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. 封装Email相关的操作

    package com.opslab.util; import javax.activation.DataHandler;import javax.activation.DataSource;impo ...

  2. python flask框架学习(一)——准备工作和环境配置与安装

    Flask装备: 学习自:知了课堂Python Flask框架——全栈开发 1.Python版本:3.6 2.Pycharm软件: 3.安装虚拟环境: (1)安装virtualenv: pip ins ...

  3. 原生JavaScript贪吃蛇

    在实例开发过程中还是能认识到很多不足的,并且加强了一些基础. 简单写一下制作过程: 1.创建画布 2.创建蛇和老鼠 坐标不能重叠 3.让蛇移动起来 4.添加死亡方法 5.添加转点坐标和方向 6.添加吃 ...

  4. 【计算机视觉】基于OpenCV的人脸识别

    一点背景知识 OpenCV 是一个开源的计算机视觉和机器学习库.它包含成千上万优化过的算法,为各种计算机视觉应用提供了一个通用工具包.根据这个项目的关于页面,OpenCV 已被广泛运用在各种项目上,从 ...

  5. 台式电脑Bios界面设置U盘启动

  6. pv回收

    学习cloudman中的k8s 152课,创建pod时,需要在k8s-host2 中挂着到在k8s-master 中/nfs中创建的挂载目录,结果提示没有/nfs/pv1 root@k8s-maste ...

  7. spark kmer计算

    输入文件:fa格式的文件 输出结果:kmer的频数和对应的kmer类型和计数 1.将fq.gz的文件转换成fa文件: #!/usr/bin/python env # -*- coding:utf-8 ...

  8. html5 canvas 自定义画图裁剪图片

    html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...

  9. 014 Android 自定义组合控件

    1.需求介绍 将已经编写好的布局文件,抽取到一个类中去做管理,下次还需要使用类似布局时,直接使用该组合控件的对象. 优点:可复用. 例如要重复利用以下布局: <RelativeLayout an ...

  10. [转帖]运维必读：Linux 的内存分页管理

    运维必读:Linux 的内存分页管理 https://cloud.tencent.com/developer/article/1356431 内存是计算机的主存储器.内存为进程开辟出进程空间,让进程在 ...