Vue.js 之 过渡动画
<!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="./vue-2.5.16.js"></script>
<style>
ul {
padding: 0;
margin: 0;
list-style: none;
} li {
border: 1px dashed #ccc;
background-color: #eee;
line-height: 35px;
font-size: 12px;
padding-left: 10px;
margin: 10px 0;
} .v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(300px);
} .v-enter-active,
.v-leave-active {
transition: all 2s ease;
} /* 控制 即将被删除的那个元素，脱离标准流，从而允许后续的元素，往上顶 */
.v-leave-active {
position: absolute;
width: 100%;
}
/* vue自带的效果 控制 那些将要往上顶的元素，通过 过渡，渐渐地顶上来 */
.v-move {
transition: all 2s ease;
}
</style>
</head> <body>
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<ul>
<!-- 1. 如果要为列表添加动画，必须使用 transition-group 把 v-for 循环渲染的元素，包裹起来 -->
<transition-group>
<li v-for="item in arr" :key="item.id" @click="remove(item.id)">
{{item.name}}
</li>
</transition-group>
</ul>
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
// 新添加的用户名称
name: '',
arr: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '赵六' }
]
},
methods: {
add() {
const user = { id: this.arr.length + 1, name: this.name }
this.arr.push(user)
this.name = ''
},
remove(id) {
const i = this.arr.findIndex(x => x.id === id)
this.arr.splice(i, 1)
}
}
});
</script>
</body> </html>
Vue.js 之 过渡动画的更多相关文章
- vue.js之过渡动画
vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...
- 058_末晨曦Vue技术_过渡 & 动画之过渡的类名
进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...
- VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move
本例要结合过渡动画四个过程的示意图一起理解. https://cn.vuejs.org/v2/guide/transitions.html 疑问: v-for="(item,i) in li ...
- Vue - 解决路由过渡动画抖动问题
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
- 066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡
多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else.最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transiti ...
- Vue.js 第3章 axios&Vue过渡动画
promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...
- 初步学习vue.js
vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 响应的数据绑定 Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同 ...
- Vue.js 系列教程 5：动画
原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地 ...
- Vue.js动画在项目使用的两个示例
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...
随机推荐
- 数据结构——java Queue类
定义 队列是一种特殊的线性表,它只允许在表的前端进行删除操作,而在表的后端进行插入操作. LinkedList类实现了Queue接口,因此我们可以把LinkedList当成Queue来用 图例 Que ...
- Docker入门以及漏洞环境搭建（10.23 第二十五天）
Docker:开源的应用程序容器引擎,使用Go语言.借助于docker打包的应用程序,将这些应用程序 包含在容器里面,在容器中实现虚拟化,容器使用的是沙箱机制,相互独立,占用资源非常少. Docker ...
- Golang的变量定义及使用案例
Golang的变量定义及使用案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.变量的定义 package main import "fmt" func m ...
- 小程序填坑：2018最新getPhoneNumber功能详解
本篇博客主要详解getPhoneNumber组件的功能,填补网上那些到处是漏洞的博客.加上小程序官方本身也是满满的漏洞. 惯例先上总纲: ##主要内容 1.前端页面组件书写 2.JS内组件用法 3.接 ...
- maven手动安装ojdbc6.jar包到本地仓库
需要jar文件 ojdbc6.jar jar下载地址1 下载地址2 本地执行: mvn install:install-file -Dfile=D:/ojdbc6.jar -DgroupId=co ...
- 一百、SAP中ALV事件之十三，给ALV的自定义按钮添加事件
一.我们查看定义的按钮,有一个名字是ZADD的自定义按钮 二.代码如下,用于判断点击了哪个按钮 三.点击测试按钮之后,会弹出一个弹窗 完美
- HDU_4960 2014多校9 Another OCD Patient DP
其实现在想起来是个巨简单的DP,模型就跟LCS很像,比赛的时候居然没想出来,在聪哥提醒下还卡了个地方 就是说给定一串n个数字的序列,可以连续合并,最终使得序列是回文的,题目也给定了合并数字所需的代价, ...
- 这篇干货让你在零点前完成学术Essay写作
写论文,做研究,上课,参加课外活动,与他人social...在美国,你会有很多的事情需要你去做,如何将自己的时间平衡的分配到自己的学习生活以及私人生活中,就显得尤为重要,而这些问题也是影响中国学生的重 ...
- 实验吧-杂项-MD5之守株待兔(时间戳&python时间戳函数time.time())
其实也有点蒙圈,因为从没做过和时间戳有关的题. 打开网站,将系统密钥解密得到一串值,而自己的密钥解密是空的,既然说是要和系统匹配,就把解密得到的值以get方式送出去. 但是发现还是在自己的密钥也发生了 ...
- centos7搭建kafka集群
一.安装jdk 1.下载jdk压缩包并移动到/usr/local目录 mv jdk-8u162-linux-x64.tar.gz /usr/local 2.解压 tar -zxvf jdk-8u162 ...