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 ...
随机推荐
- 华为云GuassDB(for Redis)发布全新版本推出：Lua脚本和SSL连接加密
摘要:9月8日,华为云GuassDB(for Redis)正式推出全新版本.新版本内核带来性能提升.无损升级.慢日志统计等多维度产品体验,同时推出Lua脚本和SSL连接加密两大重要功能,让业务设计更加 ...
- 字节跳动基于Doris的湖仓分析探索实践
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 Doris简介 Doris是一种MPP架构的分析型数据库,主要面向多维分析,数据报表,用户画像分析等场景.自带分析 ...
- PPT 笔刷：让你的PPT充满视觉冲击
其实就是下载的AI效果 辅助文字展示 辅助图片展示 创意展示图片,增强视觉冲击力 使用 删除外面的边框 https://www.bilibili.com/video/BV1ha411g7f5?p=16
- 这两种完全不同的JPEG加载方式，你肯定见过！
现如今网站所使用的的图片格式多种多样,但是有一种图片格式占到了 74% 的使用量.它就是 JPEG,即联合图像专家组.这类文件的后缀通常为 .jpg 或 .jpeg,是摄影中常见的图片类型. JPEG ...
- SpringBoot 项目集成 knife4j
文档地址:https://doc.xiaominfo.com/ knife4j 是为 Java MVC 框架集成Swagger生成 \(Api\) 文档的增强解决方案. Swagger介绍 前后端分离 ...
- 【每日一题】12.Running Median （对顶堆）
补题链接:Here 题意:动态的维护中位数的问题,依次读入一个整数,每当总个数为奇数时输出此时序列的中位数 使用对顶堆的在线做法. 为了实时找到中位数,我们可以建议两个二叉堆:一个小根堆.一个大根堆. ...
- 构建高效数据流转的 ETL 系统：数据库 + Serverless 函数计算的最佳实践
作者|柳下 概述 随着企业规模和数据量的增长,数据的价值越来越受到重视.数据的变化和更新变得更加频繁和复杂,因此及时捕获和处理这些变化变得至关重要.为了满足这一需求,数据库 CDC(Change Da ...
- freeswitch on debian docker
概述 freeswitch是一款简单好用的VOIP开源软交换平台. 因为centos系统期限的原因,尝试在debian的docker上使用fs. 环境 docker engine:Version 24 ...
- 二分图的匹配 hdu 1083
***题意:n个学生,p门课,求最大匹配,即p门课是否都有人上*** 匈牙利算法 #include<iostream> #include<cstdio> #include< ...
- 时空图预测的方法论，以及 diffusion model 基本概念
前天和善良的同学聊天,请教了 ① 时空图预测的方法论,② diffusion model 基本概念,记录下来. ① 时空图预测的方法论: 首先,构造 0 ~ t-1 时刻的 t 个图,每个图都有 n ...