制作目标动画：向上入场添加数据，点击数据右滑动离场

简单页面效果：

实现代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/animate.css"/>

        <script type="text/javascript" src="js/vue.js" ></script>

        <style type="text/css">

            .box li{

                width: 300px;

                line-height: 30px;

                margin: 5px;

                padding: 0 10px;

                border: 1px dashed royalblue;

                list-style: none;

            }

            .box li:hover{

                background-color: royalblue;

                color: #fff;

                cursor: pointer;

            }

        </style>

    </head>

    <body>

        <div id="app">

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

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

            <button @click="add">添加</button>

            <ul class="box">

                <transition-group enter-active-class="animated slideInUp" leave-active-class="animated slideOutRight" >

                    <li v-for="item in list" :key="item.id" @click="del(item.id)">{{item.name}}</li>

                </transition-group>

            </ul>

        </div>

        <script type="text/javascript">

            var vm = new Vue({

                el:'#app',

                data:{

                    list:[

                        {id:1,name:'xiaoxiao'},

                        {id:2,name:'maomao'},

                        {id:3,name:'dada'},

                        {id:4,name:'hehe'},

                    ],

                    id:'',

                    name:''

                },

                methods:{

                    add(){

                        this.list.push({id:this.id,name:this.name})

                    },

                    del(id){

                        var index = this.list.findIndex(function(item){

                            return item.id == id

                        })

                        this.list.splice(index,1)

                    }

                }

            })

        </script>

    </body>

</html>

vue animate.css训练动画案例 列表循环的更多相关文章

  1. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  2. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  3. Animate.css 前端动画开发教程

    1.首先下载animate.css文件: 2.打开动画预览地址选择想要的动画,地址:https://daneden.github.io/animate.css/  ,选择好后记住动画的名字在你下载的a ...

  4. vue中使用animate.css实现动画

    参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...

  5. vue.js（10）--案例--列表增加与删除

    品牌管理案例 (1)bootstrip快速布局 <div class="app"> <div class="panel panel-primary&qu ...

  6. vue中使用transition和animate.css动画效果

    一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...

  7. 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  8. JQuery插件之Animate.css和 jquery-aniview

    Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(fl ...

  9. vue使用animate.css类库实现动画

    首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...

随机推荐

  1. kms在线激活windows和office

    本激活,只适用vol版本的windows系统和office 激活windows在windows中使用管理员方式打开cmd命令输入slmgr /skms chongking.com切换kms服务器地址为 ...

  2. java设计模式--迪米特法则

    基本介绍 1.一个对象应该对其他对象保持最少的了解 2.类与类关系越密切,耦合度越大 3.迪米特法则又叫最少知道原则,即一个类对自己依赖的类知道的越少越好.也就是说,对于被依赖的类不管多么复杂,都尽量 ...

  3. 表关联使用INNER JOIN实现更新功能

    准备一些数据,创建2张表,表1为学生表: CREATE TABLE [dbo].[Student] ( [SNO] INT NOT NULL PRIMARY KEY, ) NOT NULL, ,) N ...

  4. 关于mac下redis的安装和部署

    近来学习scrap分布式,需要用到redis,但以前没接触过,所以记录一下自己的安装过程. 准备:Mac,redis-5.0.4.tar.gz 1.压缩包到官网下(建议下载稳定版)网址:redis.i ...

  5. 记一个开发是遇到的坑之Oralce 字符串排序

    简单描述一下情况,就是存储过程中用一个字符串类型的字段作为患者就诊的排序号,结果莫名发现叫完1号后叫了11.12等患者.用户的反馈不一定准确,自己加了日志的,赶紧拷贝日志来观察一下.结果发现实际情况就 ...

  6. U盘装系统/win to go制作笔记

    //添加图片太麻烦了吧,我扔相册里了,需要自取吧. //U盘装系统 环境:win10戴尔灵越台式机 硬件:16G U盘,Windows电脑 软件:老毛桃启动装机工具,win10镜像1803版本 进入网 ...

  7. 面试再问ThreadLocal，别说你不会！

    ThreadLocal是什么  以前面试的时候问到ThreadLocal总是一脸懵逼,只知道有这个哥们,不了解他是用来做什么的,更不清楚他的原理了.表面上看他是和多线程,线程同步有关的一个工具类,但其 ...

  8. 【机器学习】使用CNN神经网络实现对图片分类识别及模型转换

    仅做记录,后面慢慢整理 训练函数: from skimage import io, transform # skimage模块下的io transform(图像的形变与缩放)模块 import glo ...

  9. redis的一些常见面试题

    1 .在项目中缓存是如何使用的? 2.为啥在项目里要用缓存呢? 用缓存,主要用途,高性能和高并发 高性能: 场景举例:假如有这么一个操作,用户发起请求,操作数据库,查出结果,耗时600ms,然后这个结 ...

  10. Centos 7 firewall的防火墙的规则

    这是官方文档: http://www.firewalld.org/documentation/man-pages/firewall-cmd.html 想使用iptables的规则,firewall也可 ...