文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Web前端:vue 路由过渡动效

懒人小魔法师

懒人小魔法师

2024-04-23 22:44

关注

  Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品,这是为了满足不同阶层的用户的需要:能够直接满足专业的制作工作室,同样也能满足3D自由艺术家。

  <router-view>是基本的动态组件,所以我们能够直接用<transition>组件给它添加一些过渡效果:

  <transitionname="slide-left"mode="out-in"><router-view/></transition>

  过渡的类名

  在进入/离开的过渡里面,会有6个class切换。

  v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

  v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类能够直接被用来定义进入过渡的过程时间,延迟和曲线函数。

  v-enter-to:2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时v-enter被移除),在过渡/动画完成之后移除。

  v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

  v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类能够直接被用来定义离开过渡的过程时间,延迟和曲线函数。

  v-leave-to:2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效(与此同时v-leave被删除),在过渡/动画完成之后移除。

  对于这些在过渡中切换的类名来说,假如说大家使用了一个没有名字的<transition>,则v-是这些类名的默认前缀。如果你使用了<transitionname="my-transition">,那么v-enter会替换为my-transition-enter。

  ProPS:

  name-string,用于自动生成css过渡类名。例如:name:'fade'将自动拓展为.fade-enter,.fade-enter-active等。默认类名为"v"

  appear-boolean,是否在初始渲染时使用过渡。默认为false。

  css-boolean,是否使用CSS过渡类。默认为true。如果设置为false,将只通过组件事件触发注册的Javascript钩子。

  type-string,指定过渡事件类型,侦听过渡何时结束。有效值为"transition"和"animation"。默认Vue.js将自动检测出持续时间长的为过渡事件类型。

  mode-string,控制离开/进入过渡的时间序列。有效的模式有"out-in"和"in-out";默认同时进行。

  duration-number|{enter:number,leave:number}指定过渡的持续时间。默认情况下,Vue会等待过渡所在根元素的第一个transitionend或animationend事件。

  过渡模式mode:

  1.in-out:新元素先进入过渡,完成之后当前元素过渡离开。

  2.out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。

  具体的示范例子如下所示:

  .slide-left-enter{opacity:0;-webkit-transform:translate(30px,0);transform:translate(30px,0);}.slide-left-enter-active{transition:all.5sease;}.slide-left-leave-to{opacity:0;-webkit-transform:translate(-30px,0);transform:translate(-30px,0);}.slide-left-leave-active{transition:all.5sease;}

  VUE(VirtualUniversityEnterprises)是NCSPearson的一个分部,它通过分布在110多个国家(或地区)的全球考试中心网络提供全部的MCP考试。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     442人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     206人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     169人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     248人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     77人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯