<!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. HTTP1.1新增了五种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 、 CONNECT

    200 (成功) 服务器已成功处理了请求. 通常,这表示服务器提供了请求的网页. 201 (已创建) 请求成功并且服务器创建了新的资源. 202 (已接受) 服务器已接受请求,但尚未处理. 203 ( ...

  2. 【FreeMarker】FreeMarker使用（三）

    搭建一个 1.FreeMarker取值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  3. Docker容器（二）——镜像制作

    制作Docker镜像有两种方式:第一种.docker commit,保存容器(Container)的当前状态到镜像后,然后生成对应的image:第二种.docker build,使用Dockerfil ...

  4. 实现不同的项目，用不同的git 账号提交

    可以全局配置一个git 账户名和密码,然后在具体项目里单独配置一个账户名和密码 例如: git config --global user.name "winyh" git conf ...

  5. MVC ViewBag和ViewData的使用

    ViewBag public ActionResult About() { ViewBag.Message = "Your application description page.&quo ...

  6. docker之容器日志存储位置及把运行日志记录至文件

    参考:https://www.cnblogs.com/YatHo/p/7866029.html docker启动后日志会在以下位置 /var/lib/docker/containers/容器ID/容器 ...

  7. 【C/C++开发】值得学习的C语言开源项目

    值得学习的C语言开源项目 - 1. Webbench Webbench是一个在Linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的 ...

  8. Andrew Ng机器学习课程9

    Andrew Ng机器学习课程9 首先以一个工匠为例,说明要成为一个出色的工匠,就需要掌握各种工具的使用,才能知道在具体的任务中选择什么工具来做.所以今天要讲的就是机器学习的理论部分. bias va ...

  9. 3.wxml特性之数据绑定

    WXML----显示 {{变量名}} JS----------变量名:”变量值” 所有属性和组件都必须小写

  10. Appium移动自动化测试-----（六）3.AppiumDesktop功能描述

    一般功能 这些能力跨越多个驱动因素. 能力 描述 值 automationName 使用哪个自动化引擎 Appium(默认)或Selendroid或者UiAutomator2或者Espresso对于A ...