vue动画appear 实现页面刚展示出来的时候，入场效果
<style>
/* 给动画添加一组过度效果 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
/* 下面的.v-move和。v-leave-active配合使用 能够实现列表后续的元素 渐渐的票上来的效果 */
/* 当你设置移除的时候 它会默认占据最小的高度 你设置一下li的最小高度就可以了
如果没有这两行，元素删除后，它会很生硬的挤上去
*/
.v-move {
transition: all 0.6s ease;
}
.v-leave-active {
position: absolute;
}
li {
height: 50px;
margin-top: 10px;
line-height: 50px;
border: 1px dotted pink;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>
Id:<input type="text" v-model="id">
</label>
<label>
Name:<input type="text" v-model="name">
</label>
<label>
添加:<input type="button" @click="add" value="添加">
</label>
</div>
<!-- 在实现列表过度的时候 如果需要过度的元素是通过v-for循环渲染出来的 不能
使用transition包裹 需要使用transitionGroup -->
<!-- 如果要为v-for循环创建的元素设置动画 必须为每一个元素设置 :key属性 -->
<!-- appear 实现页面刚展示出来的时候，入场效果 -->
<!-- tag="ul" 处理li的父级元素是span; 这样处理后，li的父级元素是ul
因为transition-group 默认是被渲染为了span
-->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}------>{{item.name}}
</li>
</transition-group>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
id: "",
name: "",
list: [{
id: 1,
name: "赵高1"
},
{
id: 2,
name: "赵高2"
},
{
id: 3,
name: "赵高3"
},
{
id: 4,
name: "赵高4 "
},
]
},
methods: {
add() {
this.list.push({
id: this.id,
name: this.name
})
},
del(i) {
this.list.splice(i, 1);
},
},
})
</script>
vue动画appear 实现页面刚展示出来的时候，入场效果的更多相关文章
- Vue+Java实现在页面树形展示文件目录
getInfo.class /** * @author Sue * @create 2019-07-16 15:06 **/ @RestController public class getInfo ...
- 003 Vue动画
一: 0.说明 在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义 ...
- Java快速开发平台强大的代码生成器，JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布
JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...
- vue滚动行为控制——页面跳转返回上一个页面保留滚动位置
需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...
- vue 缓存的keepalive页面刷新数据
用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认 ...
- 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- Sharepoint页面项目展示画廊纯前端实现，后端用list/library简单维护
需求背景: Sharepoint页面项目展示画廊.图片+文字,要求图片与文字用Sharepoint Library维护,然后在sharepoint页面上被调用,生成项目展示画廊. 解决方案(纯前端), ...
- JSP页面数据展示：分组数据展示
一.描述: 页面上要展示的数据只要写好sql从数据库查出来即可,但是展示有时候不是太好处理.比如工作中遇到的这种情况:有一个问题处理的流程,其中需要选择下一处理人,这些处理人要以部门的形式分组展示,实 ...
- 紧接上篇，jQuery调用jsonp，并且在页面上展示
在上篇中提到了spring4.1+支持jsonp的调用,做了个例子,用来在页面上展示jsonp: (js写的丑了点,本人后端出生,前端大侠们轻拍~) var Menu = function () { ...
- CSS 动画之十-图片+图片信息展示
这个动画主要是运用了一些css3的特性,效果是展示一张商品图片,然后在商品图片的制定位置显示该商品的详细信息.效果在chrome浏览器中预览. <!DOCTYPE html> <ht ...
随机推荐
- 被灵魂问倒：这个BUG为什么没测出来？
摘要:为什么没测出来!测试怎么测得?到底会不会测?这对测试来说是灵魂拷问级别不好回答的问题了. 本文分享自华为云社区<被问:这个BUG为什么没测出来?该如何回答>,作者: 曲鸟. 一.前言 ...
- React Native UI界面还原，组件布局与动画效果
写React Native UI和写 Android XML layout 布局 ,个人感觉是大同小异 在<ReactJS到React-Native,架构原理概述>里面提过 web 环境中 ...
- Solon2 开发之IoC，一、注入或手动获取配置
约定 resources/app.yml( 或 app.properties ) #为应用配置文件 配置样例 track: name: xxx url: http://a.a.a db1: jdbcU ...
- 创建一个基本的FastAPI应用程序
Python 搭建 FastAPI 项目 要生成FastAPI项目的代码,你可以使用FastAPI的脚手架工具来快速创建一个基本的FastAPI应用程序. 以下是创建一个新的FastAPI项目的步骤: ...
- AStyle - Clion中配置代码格式化工具
安装 (OSX平台) brew install astyle brew list astyle CLion 配置 1.下载插件File Watchers 2.配置插件File Watchers:按照图 ...
- POJ：1511 Invitation Cards（双向搜索最短路径）
POJ :1511 http://poj.org/problem?id=1511 思路 求1号点到其他点的最短路 + 其他点到1号点的最短. 结果用long long. 用快读可以加快时间 代码 sp ...
- 一、redis单例安装（linux）
系列导航 一.redis单例安装(linux) 二.redis主从环境搭建 三.redis集群搭建 四.redis增加密码验证 五.java操作redis 环境:centos7.5需要的安装包: re ...
- vue学习笔记 九、父子组件实例-基本结构
系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...
- cookie和token验证区别
- P1854-DP【绿】
首先通过这道题我收获了一个知识,那就是deque可以直接赋值,作用和vector类似就是复制一个一摸一样的deque,很好用,越来越发现deque眉清目秀了起来.以后deque可能是我最常用的STL结 ...