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时又像 ...
随机推荐
- JQuery 修改用户信息
JQuery 修改用户信息,多项选择,赋值,框架: https://www.h-ui.net/v3.shtml $(data.data.roleList).each(function (i, val) ...
- WPF 对Border 边框进行投影
画一个 Border 对边框进行投影 <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.micr ...
- 初探: 通过pyo3用rust为python写扩展加速
众所周知,python性能比较差,尤其在计算密集型的任务当中,所以机器学习领域的算法开发,大多是将python做胶水来用,他们会在项目中写大量的C/C++代码然后编译为so动态文件供python加载使 ...
- django 生成二维码
def generate_qrcode(request): data = 'hello' img = qrcode.make(data) buf = io.BytesIO() img.save(buf ...
- 机器学习周刊 第4期：动手实战人工智能、计算机科学热门论文、免费的基于ChatGPT API的安卓端语音助手、每日数学、检索增强 (RAG) 生成技术综述
LLM开发者必读论文:检索增强(RAG)生成技术综述! 目录: 1.动手实战人工智能 Hands-on Al 2.huggingface的NLP.深度强化学习.语音课 3.Awesome Jupyte ...
- 转载--阿里云ECS自建K8S集群
一.概述(官方建议) 集群规划 目前在创建Kubernetes集群时,存在着使用很多小规格ECS的现象,这样做有以下弊端: 小规格Woker ECS的网络资源受限. 如果一个容器基本可以占用一个小规格 ...
- secure boot (二)基本概念和框架
什么是secure boot secure boot是指确保在一个平台上运行的程序的完整性的过程或机制.secure boot会在固件和应用程序之间建立一种信任关系.在启用secure boot功能后 ...
- 《深入理解计算机系统》实验五 —— Perfom Lab
本次实验是CSAPP的第5个实验,这次实验主要是让我们熟悉如何优化程序,如何写出更具有效率的代码.通过这次实验,我们可以更好的理解计算机的工作原理,在以后编写代码时,具有能结合软硬件思考的能力. @ ...
- .NET静态代码织入——肉夹馍（Rougamo）发布2.2
肉夹馍(https://github.com/inversionhourglass/Rougamo)通过静态代码织入方式实现AOP的组件,其主要特点是在编译时完成AOP代码织入,相比动态代理可以减少应 ...
- [转帖]tcplife的使用
https://www.rutron.net/posts/2203/bcc-tcplife-usage/ 这篇文档主要演示了 tcplife(Linux eBPF/bcc) 工具的使用. 示例 tcp ...