<!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. 转Python 爬虫入门实战

    转自:https://www.cnblogs.com/babycomeon/p/11651888.html

  2. LODOP关联后眉脚条码的遮挡的一种情况

    前面的博文中,有介绍层级关系,最先输出的打印项在下层,后输出的在上层,但是最近发现了一种例外,就是前面有关联的情况下,后面把一个条码设置为页眉页脚项,眉脚项和前面关联其他的项的那个项位置重合,虽然这个 ...

  3. Java基础教程：内部类

    Java基础教程:内部类 内部类 内部类,是指在一个类的内部定义的类.就像下面这样: public class EnclosingClass {   . . .   public class Nest ...

  4. Django2.2_No installed app with label 'admin'

    版本:py37+django2.2 错误:项目启动时出现,No installed app with label 'admin' 原因:可以发现只要注释掉settings里面的数据库DATABASES ...

  5. Qt 编译出错“undefined reference to `vtable for”

    1. 有时,如果将某个类改为继承自QObject类(以前不继承自该类),编译时会出错. 解决: clean Project, run qmake, rebulid都运行一遍,好了! 因为qmake生成 ...

  6. 033 Android App启动的闪屏效果+新手向导(多个图片滑动效果)+ViewPager使用

    1.目标效果 App启动时,出现闪屏效果(利用动画实现). App新手使用时,会出现新手向导效果. 2.XML页面布局 (1)闪屏页面 <?xml version="1.0" ...

  7. [Asp.Net Core] - 设置 Syncfusion / RichTextEditor 移除超链接及高度自适应 的方法

    背景 使用 Syncfusion / RichTextEditor 对录入后的信息进行展示:1. 希望内容高度自适应.2. 希望禁用原文中的超链接.   实现 <div class=" ...

  8. 用 Python 把微信小程序的二维码转化成图片

    官方文档 import cString import requests from tornado.web import authenticated, RequestHandler URL = 'htt ...

  9. 关于tomcat9的startup.bat闪退问题&乱码

    1.打开apache-tomcat-9.0.22的bin目录  选择图中文件  记事本打开 2.更改文件 setclasspath.bat .0_172\jre 3.保存  startup ----- ...

  10. Struts笔记4

    Struts2-拦截器-单个拦截器 自定义拦截器 1.创建一个继承AbstractInterceptor的类 package com.gyf.web.interceptor; import com.o ...