>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 16876 个阅读者 刷新本主题
 * 贴子主题:  【Vue专题】Vue组件的CSS过渡模式 回复文章 点赞(0)  收藏  
作者:sunweiqin    发表时间:2021-09-26 09:35:50     消息  查看  搜索  好友  邮件  复制  引用

本文参考《精通Vue.js:Web前端开发技术详解》,作者:孙卫琴,清华大学出版社出版

当两个DOM元素进行切换时,假定DOM元素A进入隐藏过渡阶段,DOM元素B进入显示过渡阶段,它们的过渡顺序由<transition>组件的mode过渡模式属性来决定,mode有三个可选值:
(1)默认:A和B同时过渡,过渡结束后, B取代A的位置。
(2)in-out: B先进入显示过渡阶段, B过渡结束后, A再进入隐藏过渡阶段,A过渡结束后, B取代A的位置。
(3)out-in:A先进入隐藏过渡阶段, A过渡结束后, B在A的位置上进入显示过渡阶段,直到完全显现。

例程1的mode.html演示了三种过渡模式的过渡效果。mode.html中的<transition>组件通过v-if/v-else指令包裹了两个<div>元素,它们的key分别为div1和div2。mode.html网页上的“切换”按钮通过改变isShow变量,来轮流显示两个<div>元素。

例程1  mode.html
    <style>
      .redbox {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .bluebox {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
      .special-enter-from,.special-leave-to{
        opacity: 0;
      }
      .special-enter-active,.special-leave-active{
        transition: 3s;
      }
      .special-enter-to,.special-leave-from{
        opacity: 1;
      }
    </style>

    <div id="app">
       <button v-on:click="isShow=!isShow">切换</button>    
       <hr/>

       <!-- <transition name="special" >  -->
       <!-- <transition name="special" mode="out-in"> -->
       <transition name="special" mode="in-out">
         <div v-if="isShow" key="div1" class="redbox">div1</div>
         <div v-else key="div2" class="bluebox">div2</div>
       </transition>
    </div>

    <script>
      const vm = Vue.createApp({
        data() {
          return {isShow: "true"}
        },
      }).mount('#app')
    </script>

下面通过以下步骤来测试三种过渡模式的过渡效果。
(1)<transition>组件采用默认过渡模式:
<transition name="special" >
通过浏览器访问mode.html,网页一开始显示红色的div1,点击网页上的“切换”按钮,div1进入隐藏过渡阶段,与此同时,div1下方的蓝色的div2进入显示过渡阶段。等到div1和div2过渡结束,div1消失,div2会取代div1在网页上的位置,参见图1。

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
图1  div1和div2分别进入隐藏过渡和显示过渡阶段

(2)<transition>组件采用in-out过渡模式:
<transition name="special" mode="in-out" >

通过浏览器访问mode.html,网页一开始显示红色的div1,点击网页上的“切换”按钮,div1下方的蓝色的div2进入显示过渡阶段。等到div2过渡结束,div1再进入隐藏过渡阶段。等到div1过渡结束,彻底消失后,div2再取代div1在网页上的位置。

(3)<transition>组件采用out-in过渡模式:
<transition name="special" mode="out-in" >

通过浏览器访问mode.html,网页一开始显示红色的div1,点击网页上的“切换”按钮,div1进入隐藏过渡阶段。等到div1过渡结束,彻底消失后,div2在div1所在的位置进入显示过渡阶段,直到完全显现。




程序猿的技术大观园:www.javathinker.net





[这个贴子最后由 admin 在 2021-10-09 10:39:44 重新编辑]
  Java面向对象编程-->类的生命周期
  JavaWeb开发-->Java语言中的修饰符
  JSP与Hibernate开发-->使用Session(Ⅱ)
  Java网络编程-->JSP中使用JavaBean(Ⅱ)
  精通Spring-->Java应用分层架构及软件模型
  Vue3开发-->持久化层的映射类型
  【Vue.js技术专题】Vue组件的单向数据流
  【Vue.js技术专题】自定义指令范例:v-drag指令
  【Spring Cloud Alibaba专题】@SentinelResource注解的用法
  【Java基础编程专题】浮点数的格式化以及运算精度
  【持久化专题】为什么JPA和Hibernate的持久化方法都抛出运行...
  【Spring专题】把Model的数据存放在session范围
  【Spring专题】@Query和@Modifying注解的增删改操作
  【持久化专题】用@Formula注解映射派生属性
  【持久化专题】对象-关系的映射概念
  【持久化专题】EntityManager和Session的merge()方法详解
  【Java编程基础专题】用Scanner类读取用户在控制台输入的数据
  【JavaWeb专题】选择32位或64位JDK或者Apache HTTP服务器的安...
  【Java基础编程专题】用内部类实现回调
  【Java基础编程专题】Java继承的利弊和使用原则
  我的计算机书籍创作心得
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。