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

本文参考孙卫琴,杜聚宾所创作的 <<精通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
  Java面向对象编程-->图形用户界面(上)
  JavaWeb开发-->使用Session(Ⅰ)
  JSP与Hibernate开发-->第一个helloapp应用
  Java网络编程-->基于UDP的数据报和套接字
  精通Spring-->组合(Composition)API
  Vue3开发-->CSS过渡和动画
  【Vue.js技术专题】Vuex中异步操作
  【Spring Cloud Alibaba专题】GateWay与Nacos整合
  【Java基础编程专题】浮点数的格式化以及运算精度
  【Spring专题】@Query和@Modifying注解的增删改操作
  视频:我的Java课堂总动员,带领小白们走马观花看Java江湖
  【持久化专题】用orphanRemoval属性映射父子关系
  【持久化专题】用@MapsId注解映射派生主键
  【持久化专题】Hibernate的配置文件
  【持久化专题】对象-关系的映射概念
  【持久化专题】映射Bag包(值类型的集合)
  【Java网络编程专题】盘点用Java抓取HTTP服务器和FTP服务器的...
  【持久化专题】比较JPA的EntityManager接口与Hibernate的Ses...
  【JavaWeb专题】在Servlet中利用Apache开源类库实现文件上传
  《大话Java程序设计从入门到精通》写作花絮
  【Java基础编程专题】Java集合的批量操作
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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