VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂,适合新手
1. 概述
老话说的好:过去不等于未来,过去成功了不代表将来也会成功,过去失败了也不代表将来也会失败。
言归正传,今天我们聊聊多个元素之间的过渡。
2. 多个元素之间的过渡
2.1 两个元素交替显示
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
show : false
}
},
methods : {
myClick() {
this.show = !this.show;
}
},
template:`
<div class="center">
<transition>
<div v-if="show"><h3>on</h3></div>
<div v-else="show"><h3>off</h3></div>
</transition>
<button @click="myClick">切换</button>
</div>
`
}); const vm = app.mount("#myDiv");
这个例子中,点击切换按钮,两个 div 元素会交替显示,使用了我们之前学过的 v-if 和 v-else 的例子
2.2 增加过渡效果
<style>
/* 入场起始样式 */
.v-enter-from {
opacity: 0;
}
/* 入场过渡效果 */
.v-enter-active {
transition: 2s opacity ease-in;
}
/* 入场结束样式 */
.v-enter-to {
opacity: 1;
} /* 出场起始样式 */
.v-leave-from {
opacity: 1;
}
/* 出场过渡效果 */
.v-leave-active {
transition: 2s opacity ease-in;
}
/* 出场结束样式 */
.v-leave-to {
opacity: 0;
}
</style>
我们根据之前的知识增加入场、出场的过渡效果,但效果并不太好,两个元素是同时渲染过渡效果的
2.3 增加模式
template:`
<div class="center">
<transition mode="out-in">
<div v-if="show"><h3>on</h3></div>
<div v-else="show"><h3>off</h3></div>
</transition>
<button @click="myClick">切换</button>
</div>
`
我们增加了 mode="out-in" 后,效果好多了,出场元素会先渲染,然后入场元素才渲染
2.4 点刷新,元素也有过渡效果
template:`
<div class="center">
<transition mode="out-in" appear>
<div v-if="show"><h3>on</h3></div>
<div v-else="show"><h3>off</h3></div>
</transition>
<button @click="myClick">切换</button>
</div>
`
我们在 transition 标签上增加了 appear 属性,此时点击刷新,也有过渡效果
3. 综述
今天聊了一下 VUE3 中多个元素之间的过渡,希望可以对大家的工作有所帮助,下一节我们继续讲 Vue 中 动画 的相关知识,敬请期待
欢迎帮忙点赞、评论、转发、加关注 :)
关注追风人聊Java,这里干货满满,都是实战类技术文章,通俗易懂,轻松上手。
4. 个人公众号
追风人聊Java,欢迎大家关注
VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂,适合新手的更多相关文章
- VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂,适合新手
1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...
- VUE3 之 使用 Mixin 实现代码的复用 - 这个系列的教程通俗易懂,适合新手
1. 概述 老话说的好:舍得舍得,先舍才能后得. 言归正传,今天我们来聊聊 VUE 中使用 Mixin 实现代码的复用. 2. Mixin 的使用 2.1 不使用 Mixin 的写法 <body ...
- VUE3 之 全局 Mixin 与 自定义属性合并策略 - 这个系列的教程通俗易懂,适合新手
1. 概述 老话说的好:心态决定命运,好心态才能有好的命运. 言归正传,今天我们来聊聊 VUE 中的全局 Mixin 与 自定义属性合并策略. 2. Mixin 的使用 2.1 全局 Mixin 之前 ...
- VUE3 之 使用标签实现动画与过渡效果(下) - 这个系列的教程通俗易懂,适合新手
1. 概述 毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...
- VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂,适合新手
1. 概述 光环效应告诉我们: 当一个人在某一方面取得了巨大的成功,人们就会给他贴上正面的标签,这个人从此就被"优秀"的光环所笼罩,他做的一切,人们都认为是正确的. 例如:越是名气 ...
- VUE3 之 列表动画 - 这个系列的教程通俗易懂,适合新手
1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1 列表中增加和删除元素 <style> .my-ite ...
- VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂,适合新手
1. 概述 首因效应告诉我们: 在日常交往中,第一印象是非常重要的,好的第一印象能让我们在与人相处时事半功倍. 但也从另一面告诉我们,不能仅凭第一印象去判断一个人,有时虚假的第一印象,也有可能蒙蔽我们 ...
- VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用 - 这个系列的教程通俗易懂,适合新手
1. 概述 洛克定律告诉我们: 当我们的目标很远大,远到我们都看不到终点时,放弃几率就会很大,就像跑马拉松比赛,由于时间长.距离长,很多选手都会选择在中途放弃. 其实有个好办法,就是拆分,把大目标拆分 ...
- VUE3 之 插槽的使用 - 这个系列的教程通俗易懂,适合新手
1. 概述 非理性定律告诉我们: 人们总是习惯于以情感去判断眼前的事物,非理性的去做决定. 对于长远的利益,人们更愿意去选择短期的利益. 因此在做决定前要让自己冷静,理性的分析,让自己看的更远. 言归 ...
随机推荐
- 010 Linux 文本统计与去重 (wc 和 uniq)
wc 命令一般是作为组合命令的一员与其他命令一同起到统计的作用.而一般情况下使用wc -l 命令较多. uniq 可检查文本文件中重复出现的行,一般与 sort 命令结合使用.一起组合搭配使用完成统计 ...
- 带你读AI论文:NDSS2020 UNICORN: Runtime Provenance-Based Detector
摘要:这篇文章将详细介绍NDSS2020的<UNICORN: Runtime Provenance-Based Detector for Advanced Persistent Threats& ...
- 「JOI 2015 Final」舞会
「JOI 2015 Final」舞会 略微思考一下即可知该过程可以化为一棵树.(3个贵族中选择1个,即新建一个节点连向这3个贵族). 该树的结点个数为\(2n\). 考虑二分答案mid. 判定的是公主 ...
- 1.k8s的前世今生
k8s是Kubernetes的缩写,Google 于 2014 年开源了 Kubernetes 项目. 一.k8s的历史演变 k8s的演变过程:首先从传统的服务-->虚拟机部署-->容器部 ...
- Java线程--Callable使用
原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11871727.html Java线程--Callable使用 Callable和Runnabl ...
- Python起航
安装Python 安装python 添加python安装目录到PATH 添加Scripts目录到PATH 如果同时安装了python2和python3,那么通过python和python3,pip和p ...
- 配置docker的DNS
方式一:在宿主机的 /etc/docker/daemon.json 文件中增加以下内容来设置全部容器的 DNS: { "dns" : [ "114.114.114.114 ...
- spring5+Struts2+hibernate5
一,加jar包 加入顺序,个人推荐,spring->struts2->hibernate spring的jar包:基本包共21个+用到的aspectj注解的包2个+日志包1个 ------ ...
- 使用代码绑定 DataGridView 控件用于程序界面显示表格
需求 软件界面需要使用表格,对数据进行显示.交互,这是一个非常通用的需求. 实现方法 DataGridView介绍 参考 https://docs.microsoft.com/en-us/dotnet ...
- springboot学习第一步
关于springboot的介绍就不多说了,可以去百度. 默认的情况下,springboot1.4.0版本要求Java7以上和spring4.3.2以上,当然你也可以使用java1.6,只不过你需要额外 ...