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 ...
随机推荐
- JVM内存模型，你看这一篇就够了
摘要:JVM是一种用于计算设备的规范,是一个虚构出来的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的. 本文分享自华为云社区<[云驻共创]JVM内存模型的探知之旅>,作者:多米 ...
- 火山引擎 DataTester 科普：A/B 实验常见名词解释
DataTester 是字节跳动在 2019 年正式通过火山引擎数智平台推出的对外服务的 A/B 实验工具,它基于先进的底层算法,提供科学分流能力,提供智能的统计引擎,实验结果可靠有效,助力业务决策. ...
- JAVA PDF 截取N页，生成新文件，转图片，多个PDF 合并
JAVA PDF 截取N页,生成新文件,转图片,多个PDF 合并 <dependency> <groupId>com.itextpdf</groupId> < ...
- 【JAVA基础】MySQL配置
mySQL配置 数据库连接 初始化配置 --创建用户 并授权 create user 'injasup'@'%' identified by 'supplier@2023#!'; GRANT SELE ...
- three.js 视频融合
MixVideo.js代码: //视频融合 import * as THREE from '../build/three.module.js'; import { API } from '../js. ...
- AtCoder Beginner Contest 167 （A~F，DEF Good）
比赛链接:https://atcoder.jp/contests/abc167/tasks AB水题, C - Skill Up 题意: 初始时 \(m\) 个算法的能力均为 \(0\),\(n\) ...
- win32com操作word API精讲 第八集 Range和Selection的区别
本课程<win32com操作word API精讲&项目实战>以视频为主,文字为辅,公众号ID:一灯编程 众所周知,在word编程中Range和Selection都能实现范围的选中, ...
- 以太网扫盲（一）各种网络总线 mii总线，mdio总线介绍
本文主要介绍以太网的MAC(Media Access Control,即媒体访问控制子层协议)和PHY(物理层)之间的MII(Media Independent Interface ,媒体独立接口), ...
- 《3D编程模式》写书-第2次记录
大家好,目前我已经完成了"拼接模式"."撤销重做模式"."ECS模式"的初稿 下面会给出它们的使用场景,如果您正好能用到,请联系我提前阅读模 ...
- vue配置proxy实现跨域