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

简单页面效果：

实现代码如下：

<!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. centos7配置Logstash同步Mysql数据到Elasticsearch

    Logstash 是开源的服务器端数据处理管道,能够同时从多个来源采集数据,转换数据,然后将数据发送到您最喜欢的“存储库”中.个人认为这款插件是比较稳定,容易配置的使用Logstash之前,我们得明确 ...

  2. iOS 开发技术栈与进阶

    最近有一些开发朋友问我应该怎样提升自己的能力,回想起来做了这么久 iOS 开发,我也有过那种“让我做一个功能实现个需求我会做,但接下来怎样提高我不知道.”的时期,这里尝试列一下 iOS 开发的相关技术 ...

  3. Android Studio 快捷方式记录

  4. gradle与android studio 关系及gradle配置

    前言 我们一般开发android 使用android studio ,android studio 安装的时候,会帮我们做两件事,配置好自己的jdk. 实际上,使用的其实不是我们在path中配置的jd ...

  5. Python 爬取必应壁纸

    import re import os import requests from time import sleep headers = { "User-Agent": (&quo ...

  6. 硬盘500M，为什么没有500M。10M宽带，为什么网速没有10M？

    在天朝, 硬件厂商用1000代替1024, 通信公司,用 byte来代替bit. 比如 500G的硬盘,应该有 500 * 1024 *1024 *8 = 4.194304*10^9 位 但是按照厂商 ...

  7. 硬件知识整理part2--电阻在反馈网络中的应用

    学而不厌,诲人不倦,不知老之将至.--孔子 电阻作为电路中基本的元器件之一.在电路设计中,我们有时会使用欧姆定律来大致估计一下电阻值的大小,但是大多时候我们是不用去过多考虑电阻值的大小,像我这样大方的 ...

  8. LeetCode 面试题 02.02. 返回倒数第 k 个节点

    题目链接:https://leetcode-cn.com/problems/kth-node-from-end-of-list-lcci/ 实现一种算法,找出单向链表中倒数第 k 个节点.返回该节点的 ...

  9. lombok版本过低报错

    调试报错Error:java: java.lang.ExceptionInInitializerError  com.sun.tools.javac.code.TypeTags JAVA12调整原有项 ...

  10. 论文阅读笔记（二十）【AAAI2019】：Spatial and Temporal Mutual Promotion for Video-Based Person Re-Identification

    Introduction (1)Motivation: 作者考虑到空间上的噪声可以通过时间信息进行弥补,其原因为:不同帧的相同区域可能是相似信息,当一帧的某个区域存在噪声或者缺失,可以用其它帧的相同区 ...