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

简单页面效果：

实现代码如下：

<!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. C++常见编程--获取当前系统时间

    C++常见编程--获取当前系统时间 文章首发https://www.cppentry.com 本文主要使用time() 及strftime() 函数 C++系统和时间相关的函数基本上都是使用C语言提供 ...

  2. nginx+uwsgi部署Django项目到Ubuntu服务器全过程，以及那些坑！！！

    前言:自己在windows上用PyCharm编写的Django项目,编写完后在windows上运行一点问题都没有,但是部署到服务器上时却Bug百出.百度,CSDN,sf,各种搜索寻求解决方案在历时3天 ...

  3. Hibernate入门之创建数据库表

    前言 Hibernate 5.1和更早版本至少需要Java 1.6和JDBC 4.0,Hibernate 5.2和更高版本至少需要Java 1.8和JDBC 4.2,从本节开始我们正式进入Hibern ...

  4. PVE裸机虚拟化环境安装之后的一些部署记录

    pve镜像使用的是proxmox-ve_6.1-1 安装之后root登录 apt update 更新源的时候会出现一些问题,是因为其中有一个企业源报错的原因 安装sudo和vim,否则不好管理非roo ...

  5. B样条曲线方程和C++实现

    功能:根据参数u值和k(大小为阶数值)与节点矢量,计算第i个k次B样条基数 输入参数: u—参数值:k—大小值为阶数:i—第i个k次B样条的支撑区间左端节点的下标:aNode为节点向量. 输出参数:返 ...

  6. 思科路由器、交换机配置Console 线线序 （亲测可以）

    网上有许多标准console线配置线序,在配置思科网络设备时都是不能用的,因为思科的console线序是专用的, 如下 水晶头侧 线序 B 白橙,橙,白绿,蓝 ,白蓝,绿,白粽,棕 对应串口侧线序 1 ...

  7. Expert C Programming（C专家编程） 读书笔记

    目录 几个比较奇葩的指针赋值 int (* fun())() int (* foo())[] int (*foo[])() const 关键词的意义是什么? char const (*next )() ...

  8. ArcGIS Runtime SDK for Android 加载shp数据，中文乱码问题

    针对ArcGIS10.2版本的解决办法(默认中文编码为OEM): 现有一个图层名称为“图层.shp”,以此为例: 1.拷贝一个cpg文件,修改名称为“图层.cpg”,并用文本打开cpg文件修改编码为“ ...

  9. 利用 serviceStack 搭建web服务器

    1,资料地址 参考资料 https://docs.servicestack.net/ https://docs.servicestack.net/create-your-first-webservic ...

  10. 分库分表技术演进&最佳实践

    每个优秀的程序员和架构师都应该掌握分库分表,这是我的观点. 移动互联网时代,海量的用户每天产生海量的数量,比如: 用户表 订单表 交易流水表 以支付宝用户为例,8亿:微信用户更是10亿.订单表更夸张, ...