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 ...
随机推荐
- iOS应用上架详细图文教程
App Store作为苹果官方的应用商店,审核严格周期长一直让用户头疼不已,很多app都"死"在了审核这一关,那我们就要放弃iOS用户了吗?当然不是!本期我们从iOS app上 ...
- 神经网络优化篇：详解指数加权平均的偏差修正（Bias correction in exponentially weighted averages）
指数加权平均的偏差修正 \({{v}_{t}}=\beta {{v}_{t-1}}+(1-\beta ){{\theta }_{t}}\) 在上一个博客中,这个(红色)曲线对应\(\beta\)的值为 ...
- 【库函数】QT 中QString字符串的操作
QString是QT提供的字符串类,相应的也就提供了很多很方便对字符串的处理方法.这里把这些对字符串的操作做一个整理和总结. 1. 将一个字符串追加到另一个字符串的末尾 QString str1 = ...
- U64949 棋盘覆盖（二分图）| 二分图匹配总结
https://ac.nowcoder.com/acm/contest/1062/B [题目] 给出一张n×n(n≤100)的国际象棋棋盘,其中被删除了一些点,问可以使用多少1*2的多米诺骨牌进行掩盖 ...
- Codeforces Global Round 12（个人题解）
1450A. Avoid Trygub 挺简单的题,题意是避免字符串中有子串"Trygub" 只要给字符串排序就可以了,这样一定不会出现 void solve() { string ...
- 与奥运同行：打造智慧体育馆 3D 可视化
祝贺中国队在东京奥运会夺得金牌 38 枚.银牌 32 枚.铜牌 18 枚.中国健儿在奥运舞台上交出了一份璀璨的成绩单.用一场场精彩绝伦的比赛,演绎"更快.更高.更强.更团结"的奥林 ...
- linux有用的命令
如下是一些在工作中偶尔会用到,每次用的时候都要查一查资料的命令这里总结一下方便今后查阅 0.查看操作系统版本 cat /etc/issue 或 cat /etc/redhat-release 1.后 ...
- Eureka相关相关接口和代码位置
1.服务注册:com.netflix.eureka.registry.AbstractInstanceRegistry#register(InstanceInfo registrant, int le ...
- 报错：for..in loops iterate over the entire prototype chain, which is virtually never what you want.
for..in loops iterate over the entire prototype chain, which is virtually never what you want. 意思是使用 ...
- 多倍图切图cutterman