vue动画 <transition-group> 使用半场动画
<style>
/* 给动画添加一组过度效果 */
.v-enter,
.v-leave-to {
opacity: 0.8;
/* 从右向左进入 */
transform: translateX(80px);
/* 从下向上进入 */
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
</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属性 -->
<ul>
<transition-group>
<li v-for="item in list" :key="item.id">
{{item.id}}---我是动画--->{{item.name}}
</li>
</transition-group>
</ul>
</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
})
this.name = this.id = "";
},
},
})
</script>
vue动画 <transition-group> 使用半场动画的更多相关文章
- 转场动画CALayer (Transition)
1.将对应UI控件的层调用以下接口即可 1.1 .h文件 // // 文 件 名:CALayer+Transition.h // // 版权所有:Copyright © 2018年 leLight. ...
- iOS 转场动画探究(一)
什么是转场动画: 转场动画说的直接点就是你常见的界面跳转的时候看到的动画效果,我们比较常见的就是控制器之间的Push和Pop,还有Present和Dismiss的时候设置一下系统给我们的modalTr ...
- iOS CATransition 自定义转场动画
https://www.jianshu.com/p/39c051cfe7dd CATransition CATransition 是CAAnimation的子类(如下图所示),用于控制器和控制器之间的 ...
- iOS 动画学习之视图控制器转场动画
一.概述 1.系统会创建一个转场相关的上下文对象,传递到动画执行器的animateTransition:和transitionDuration:方法,同样,也会传递到交互Controller的star ...
- iOS：探究视图控制器的转场动画
一.介绍 在iOS开发中,转场动画的使用无处不见,不只是我们自己更多的使用UIViewblock动画实现一个转场动画,其实,在我们实现VC控制器跳转的时候都是转场动画的实现,例如标签栏控制器的切换.模 ...
- Android Activity和Fragment的转场动画
Android Activity和Fragment的转场动画 Activity转场动画 Activity的转场动画是通过overridePendingTransition(int enterAnim, ...
- Swift开发小技巧--自定义转场动画
自定义转场动画 个人理解为重写了被弹出控制器的modal样式,根据自己的样式来显示modal出来的控制器 例:presentViewController(aVC, animated: true, co ...
- replugin插件化，插件转场动画失效的问题解决
说明 随着应用功能的丰富,Android程序的安装包也逐渐变大,这成为应用程序现有框架下难以摆脱的瓶颈.所以引入了rePlugin插件化框架,将应用按功能拆分为插件,以此减小apk的大小并同时增加应用 ...
- 转场动画UINavigationControllerDelegate
从iOS7开始,苹果更新了自定义ViewController转场的API,这些新增的类和接口让很多人困惑,望而却步.本文就从这些API入口,让读者理清这些API错综复杂的关系. 几个protocol ...
- Android转场动画,Avtivity转场动画;
转场动画 - 共享元素动画 先看效果: Activity1点击小图标开启Activity2: 开启Activity2效果就像是小图标放大了填充上去的,关闭Activity2回到Activity1时又像 ...
随机推荐
- Spring中部署Activiti流程定义的三种姿势
摘要:本文对工作流Activiti框架中流程定义的部署进行了详细说明介绍. 本文分享自华为云社区<项目中工作流部署详细解析!Spring中部署Activiti流程定义的三种姿势>,作者:攻 ...
- 9月活动回顾（免费领取PPT）｜火山引擎DataLeap、ByteHouse多位专家带来DataOps、实时计算等前沿技术分享！
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 在上月举行的火山引擎开发者社区 Meetup 第12期暨超话数据专场<数智化转型背景下的火山引擎大数据技 ...
- sqlalchemy 查询已存在表(无model定义)
已存在的表信息如下,该表不是由sqlalchemy创建.想要对该表做CRUD,可以通过sqlalchemy提供的一个解析方法完成. 示例代码: from sqlalchemy import creat ...
- Linux CentOS 8 安装DHCP服务
DHCP 如果虚拟机没有 /etc/dhcp/dhcpd.conf 文件,这可能是因为 DHCP 服务器软件包尚未安装,或者安装后配置文件未创建. 要创建 DHCP 服务器配置文件 dhcpd.con ...
- C-Shopping基于Next.js，开源电商平台全新亮相
嗨,大家好!欢迎来到C-Shopping,这是一场揭开科技面纱的电商之旅.我是C-Shopping开源作者"继小鹏",今天将为你介绍一款基于最新技术的开源电商平台.让我们一同探索吧 ...
- 使用port-forward本地访问k8s集群内redis
前言 通过kubectl port-forward端口转发,在本地机器上访问k8s集群内的服务/数据库,对开发.调试.定位bug都很有用. 每次都要查,这里记录一下. 步骤 当然首先要确保本地机器上安 ...
- LVS Nginx HAProxy区别
LVS 抗负载能力强,性能高,能达到F5硬件的60%,对内存和cpu资源消耗比较低 工作在四层仅作分发之用,通过vrrp协议转发,具体流量由linux内核处理,没有流量的产生 稳定性.可靠性好,自身有 ...
- ABAP 内表与JSON转换
一.内表转JSON "-----------------------------@斌将军----------------------------- TYPES: BEGIN OF ty_na ...
- 【每日一题】25.「火」皇家烈焰 （字符串DP）
补题链接:Here 转移方程的具体含义我在代码注释里写出来了, 很好理解 这道题的难点在于如何表示状态, 一旦找到状态表示方法 只要根据题意做转移就行了 最后的答案就是 \(dp[n][0][0] + ...
- Springcloud和Dubbo的区别。Eureka和Ribbon和Hystrix和zuul
netty 是什么? "netty 是一个基于nio的客户.服务器端编程框架,netty提供异步的,事件驱动的网络应用程序框架和工具,可以快速开发高可用的客户端和服务器.netty是基于ni ...