没有合适的资源?快使用搜索试试~ 我知道了~
【JavaScript源代码】如何在Vue中实现Svelte的Defer Transition.docx
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 44 浏览量
2021-12-29
21:21:08
上传
评论
收藏 19KB DOCX 举报
温馨提示
试读
11页
如何在Vue中实现Svelte的Defer Transition 最近观看了Rich Harris的<Rethinking Reactivity>视频,惊叹于Svelte框架的高效同时,还发现了Vue所不具备的一些关于动画的原生支持—defer transitions. 先看看Svelte所谓的defer transition的效果吧。 这是使用Svelte做的Todo Demo应用。整个todo分成3个部分。输入部分,todo列表和done列表。当点击todo列表中的条目时,相应条目会被“移动”到done列表,反之亦然。 在这里,条目从一个列表转移到另一个列表,不是很突兀的闪现,而
资源推荐
资源详情
资源评论
如何在 Vue 中实现 Svelte 的 Defer Transion
最近观看了 的视频,
惊叹于 框架的高效同时,还发现了 所不具备的一
些关于动画的原生支持—
先看看 所谓的 的效果吧。
这是使用 做的 应用。整个 分成
个部分。输入部分, 列表和 列表。当点击 列
表中的条目时,相应条目会被“移动”到 列表,反之亦
然。
在这里,条目从一个列表转移到另一个列表,不是很
突兀的闪现,而是非常友好地从点击处,移动到目的地;
同时,当列表中条目离开时,剩余的条目会丝滑地向上移
动填补空缺的位置。在 里,只需要仅仅加上几行代码,
就能实现,对于开发者非常友好且高效。 参考如下代码或
!
者 教程
"#$%&'(%()
*
+&,""+)),
+&,""+)),
+-.
..&*/+&"%(&%0
()
".)
*1 +&,"%( &
%(),2*1
2*
"2)
仅仅在 上加上了 、 和 属性。这
里, 和 各自接受框架提供的函数 和 并且
给他们提供了筛选条件。 属性接收内置的 -. 方法。
这 里 的 -. 不 是 翻 转 , 而 是 3456 技 术 技 术 , 在
7.中也有用到。主要用于整体移动列表剩余
条目去填补所失去元素的位置。
于是我就在想,如果是 的话,如何能达到相应的
效果呢。 (不想看详细说明的话,可以直接查看 .
中的代码)
原 生 提 供 了 两 个 组 件 支 持 动 画 。 和
7.。由于是 的移动,所以我们这里使用
7. 。 具 体 使 用 方 法 可 以 参 考 教 程
89。
要想达到同样的效果,有两大 :5 动画效果要实现。
列表中条目消失时,剩余条目移动补齐空位
条目消失同时在另外一个列表插入时,条目移动
第一个需求的实现比较简单, 原生已经提供了良好的支
持,参考 文档中的 47;7 即可
为了实现第二个需求,有几个问题必须解决:
我们先看看前两个问题的如何解决。根据文档的介绍
7. 提供了 <.。分别是:
剩余10页未读,继续阅读
资源评论
mmoo_python
- 粉丝: 0
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Python 程序语言设计模式思路-行为型模式:策略模式:将算法封装成独立的类,并使它们可以互相替换及支付模式数据压缩
- main.py
- Last Loaded Test.DBK
- Screenshot_20240520_163011.jpg
- ubuntu-python3-whisper-tornado docker镜像 Dockerfile
- ubuntu-python3-whisper-tornado docker镜像07
- 新录音 8.m4a
- ubuntu-python3-whisper-tornado docker镜像
- ubuntu-python3-whisper-tornado docker镜像
- ubuntu-python3-whisper-tornado docker镜像09
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功