vue animate.css训练动画案例 列表循环
制作目标动画：向上入场添加数据，点击数据右滑动离场
简单页面效果：
实现代码如下：
<!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训练动画案例 列表循环的更多相关文章
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- Animate.css 前端动画开发教程
1.首先下载animate.css文件: 2.打开动画预览地址选择想要的动画,地址:https://daneden.github.io/animate.css/ ,选择好后记住动画的名字在你下载的a ...
- vue中使用animate.css实现动画
参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...
- vue.js（10）--案例--列表增加与删除
品牌管理案例 (1)bootstrip快速布局 <div class="app"> <div class="panel panel-primary&qu ...
- vue中使用transition和animate.css动画效果
一.单个动画中,使用div中引用animate动画 1.下载依赖 npm install animate.css –save 2.main.js中全局引用 import animate from 'a ...
- 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
- JQuery插件之Animate.css和 jquery-aniview
Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(fl ...
- vue使用animate.css类库实现动画
首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...
随机推荐
- redis系列-要命的zrangebyscore
0x0 引子 无论做哪种业务都躲不开排行功能.Redis 的 Sorted Sets 结构就是为排行而生的.它简单易用,效率奇高.同时它也有坑,你真的了解它吗? 老规矩,先讲故事,后科普.这里是 So ...
- 用Python制作酷炫词云图，原来这么简单！
一.简介词云图是文本挖掘中用来表征词频的数据可视化图像,通过它可以很直观地展现文本数据中地高频词:! 图1 词云图示例 在Python中有很多可视化框架可以用来制作词云图,如pyecharts,但这些 ...
- day18 正则表达式初学
正则规则:客观存在的,世界上任何一种语言都能使用它. 在线测试网址:http://tool.chinaz.com/regex 正则语句:只和字符串相关,需要考虑的是:在同一个位置上可以出现的字符范围 ...
- day16 匿名函数
# 匿名函数# 函数名 = lambda 参数1,(参数2,....) : 返回值 [注意:匿名函数不允许换行]# 匿名函数返回值和正常函数一样可以是任意数据类型# def add(x,y):# re ...
- ansible基本使用（一）
ansible是什么? ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.chef.func.fabric)的优点,实现了批量系统配置.批量程序部署.批量 ...
- Go并发模式代码示例
演讲稿:Go Concurrency Patterns Youtube视频 作者:Rob Pike 练习题目:谷歌搜索:一个虚拟框架 谷歌搜索1.0 PPT从43页开始:https://talks.g ...
- Function and Function
If we define , do you know what function means? Actually, calculates the total number of enclosed ...
- 在服务器上安装并配置JDK1.8
参考链接:https://blog.csdn.net/qq_40958000/article/details/83996912
- 开发分支管理模型之阿里AoneFlow
说到分支管理模型,令人最为熟悉的莫过于TrunkBased 和 GitFlow. TrunkBased 模型是持续集成思想所崇尚的工作方式,它由单个master分支和许多release分支组成,每个r ...
- 我用 Python 集齐了五福
[新智元导读]又到了每年集五福的时间.你的五福集齐了吗?每天在各种群里苦苦求扫福,或者忍受着别人天天求扫福,是不是有点厌倦了.作为技术人员,怎么能忍受得了这种低效的全人工操作呢?今天就为大家推荐用 ...