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等技术,热爱新技术,热 ...
随机推荐
- php 获取时间段
switch ($type){ case 'day'://当日 $end=date(,,,date(,date('Y'))); $where=' and '.$pre.'create_time> ...
- 如何在PHP中进行会话处理？
在PHP中会话处理是一个很重要的概念,它允许用户信息在网站或应用程序的所有页面上保持不变.下面本篇文章就来带大家学习一下PHP中会话处理的基础知识,希望对大家有所帮助. PHP中什么是会话(sessi ...
- idea-plugin-easycode
1.背景 在练习使用mybatis-generator时候,无意间看到博文esaycode(代码神器),https://www.jianshu.com/p/e4192d7c6844,试验完,感觉这个工 ...
- 编译安装常用包+阿里镜像源-常用资源-系统-下载-科莱软件下载-docker仓库包-安全圈-杏雨梨云-图形界面安装-docker私有双仓库-阿里源报错处理-centos7目录大小
yum install apr-util apr-util-devel apr apr-devel pcre pcre-devel zlib zlib-devel openssl openssl-de ...
- Django（五）1 - 4章实战：从数据库读取图书列表并渲染出来、通过url传参urls.py path,re_path通过url传参设置、模板语法
一.从数据库读取图书数据并渲染出来 1)app1/views.py函数books编写 [1]从模型下导入bookinfo信息 [2]从数据库获取图书对象列表 [3]把获取到的图书对象赋值给books键 ...
- Visual Studio Code 断点调试配置方法（请按我的步骤 一定可以做到）
1 visual studio code 的 extentions 里安装插件 debugger for chrome2 devtool: 'eval-source-map', cacheBustin ...
- nodejs常用模块
推荐的入门教程: <七天学会NodeJS> https://github.com/nqdeng/7-days-nodejs <Node.js 包教不包会> https://g ...
- cf 785#
23333再次水惨了..(心酸啊) A题呵呵呵呵呵 #include<cstdio> #include<iostream> using namespace std; int m ...
- C语言小游戏: 2048.c
概要:2048.c是一个C语言编写的2048游戏,本文将详细分析它的源码和实现.C语言是一种经典实用的编程语言,本身也不复杂,但是学会C语言和能够编写实用的程序还是有一道鸿沟的.本文试图通过一个例子展 ...
- [题解] LuoguP6071 [MdOI2020] Treequery
传送门 感觉这是一个写的很舒服的题? 树上路径的交什么的就很想树上差分?发现根本没法做...它还要求在线.... 好先来看\(Subtask\)吧\(qwq\)... Subtask 1 \(l=r\ ...