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 ...
随机推荐
- 一通百通，带你一次性全理解Spring 中的Template
摘要:Template定义了问题的边界,子类定义了具体的实现,只要在模板的范围内玩耍就可以了. 本文分享自华为云社区<Spring 中的Template一次全理解,解析问题的本质>,作者: ...
- Taro架构构析(2)：Taro 设计思想及架构
从之前微信公众号的开发经验来说,以及腾讯开放平台的接入 等经验来看,一直对腾讯的开放文档 有心理阴影. 微信小程序从文件组织上看,一个小程序页面或组件,需要同时包含 4 个文件:脚本逻辑.样式.模板以 ...
- Scala Http请求工具类
import java.io.IOException import java.util import org.apache.http.client.ClientProtocolException im ...
- 数据飞轮拆解车企数据驱动三板斧：数据分析、市场画像、A/B 实验
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,火山引擎数智平台(VeDI)2023 数据飞轮汽车行业研讨会在上海举办,活动聚焦汽车行业数字化转型痛点,从字 ...
- 火山引擎云原生数据仓库 ByteHouse 技术白皮书 V1.0 （Ⅴ）
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,<火山引擎云原生数据仓库 ByteHouse 技术白皮书>正式发布.白皮书简述了 ByteHou ...
- deepin15.11系统使用罗技k380键盘
罗技k380键盘官方支持安卓.windows.macos,就是没有支持Linux系统.在开发过程中使用的是Deepin15.11系统,如何连接罗技k380就是一个问题,折腾了一段时间后解决这个问题.记 ...
- 轻松导航：教你在Excel中添加超链接功能
前言 超链接是指在网页或电子文档中常见的元素,它的主要作用是将一个文本或图像与另一网页.文件或资源链接起来,从而使用户能够通过点击该链接跳转到目标资源.超链接可以起到导航以及引用的作用.超链接通常有以 ...
- Leaflet 使用图片作为地图
Leaflet 使用图片作为地图 关键代码: L.CRS.Simple.transformation = new L.Transformation(1, 0, 1, 0); // 坐标原点切换为左上角 ...
- Python使用pandas库读取txt文件中的Json数据，并导出到csv文件
使用的是 Python 3 代码: #!/usr/bin/python # -*- coding: gbk -*- # JSON数据导出到csv文件 import json import pandas ...
- 高数 | Dirichlet 积分
在分析学中,Dirichlet 积分 是如下形式的 无穷限积分 \[\int_{0}^{+\infty} \frac{\sin x}{x} \mathrm{~d} x \] 它是条件收敛的,且收敛到 ...