>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 13508 个阅读者 刷新本主题
 * 贴子主题:  【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开发-->使用Session(Ⅱ)
  JSP与Hibernate开发-->数据库事务的概念和声明
  Java网络编程-->通过JavaMail API收发邮件
  精通Spring-->组合(Composition)API
  Vue3开发-->虚拟DOM和render()函数
  【Vue.js技术专题】Vue组件的数据监听
  【Vue.js技术专题】Vue组件的命名规则
  【Vue.js技术专题】路由导航中抓取数据
  【Spring Cloud Alibaba专题】SkyWalking整合MySQL
  【Spring Cloud Alibaba专题】ShardingSphere核心概念
  【Spring Cloud Alibaba专题】按照集群模式搭建Redis集群
  【Spring Cloud Alibaba专题】Dubbo框架中提供者回调消费者
  【Java基础编程专题】使用和创建JavaDoc文档
  【Spring专题】服务器端推送
  探讨IT技术作者的素养
  从《精通Spring》和《精通Vue.js》的写作分享学习新技术的经...
  【持久化专题】用orphanRemoval属性映射父子关系
  【持久化专题】映射一对多双向关联关系
  【Java网络编程专题】异步通道和异步运算结果
  【JavaWeb专题】在Servlet中利用Apache开源类库实现文件上传
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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