美文网首页
添加过渡动效

添加过渡动效

作者: 张先觉 | 来源:发表于2020-12-01 15:50 被阅读0次

路由跳转添加过渡动效

  • 绑定动画类:
<transition :name="transitionName">
  <router-view></router-view>
</transition>

  • JS控制动画类是slide-right还是slide-left:
export default {
  data(){
    return{
      transitionName:"",
    } 
  },
  // 监听,当路由发生变化的时候执行
  watch:{
      $route(to,from){
           const toDepth = to.path.split('/').length
           const fromDepth = from.path.split('/').length
           this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}
  • 动画样式
<style lang="scss">
    .slide-right-enter-active,
    .slide-right-leave-active,
    .slide-left-enter-active,
    .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
    position:absolute;
    }
    
    .slide-right-enter {
    opacity: 0;
    transform: translate(-100%);
    }
    
    .slide-right-leave-active {
    opacity: 0;
    transform: translateX(100%);
    }
    
    .slide-left-enter {
    opacity: 0;
    transform: translateX(100%);
    }
    
    .slide-left-leave-active {
    opacity: 0;
    transform: translateX(-100%);
    }
</style>

相关文章

  • 添加过渡动效

    路由跳转添加过渡动效 绑定动画类: JS控制动画类是slide-right还是slide-left: 动画样式

  • Vue 路由 过渡动效 数据获取方法

    过渡动效 是基本的动态组件,所以我们可以用 组件给它添加一些过渡效果: 单个路由的...

  • [iOS] 视频添加动效水印实现介绍

    [iOS] 视频添加动效水印实现介绍 [iOS] 视频添加动效水印实现介绍

  • 腾讯出品的交互微动效设计指南

    本设计指南适用于UI设​计界面中交互微动效,涵盖入场、出场动效,过渡动效和加载动效,在时间和缓动曲线的选择上提供了...

  • CSS动画

    过渡 transition 属性 示例 参考: 动效落地方法 优秀的 CSS 交互动效示例 支持:nternet ...

  • vue-router过渡动效

    前言: 一个常用的需求:当路由进行切换的时候进入不同的页面时,我们可以添加不同的切换方式,这时就用到了vue-ro...

  • 如何给TableView、CollectionView添加动效

    如何给TableView、CollectionView添加动效 如何给TableView、CollectionVi...

  • [vue-router4进阶] 0.过渡动效

    现在我们开始学习一些vue-router的高级一点的内容,这节课我们一起学习如何在页面跳转时添加一些过渡动效。我们...

  • 移动应用中的过渡动效

    动效是用户体验的重要组成部分。在移动应用中,您可以通过过渡动效非常巧妙地进行传达很多事情。发送消息、打开设置、勾选...

  • android5.0 Activity过渡动效

    Android5.0提供了3种Transition类型。 进入动画:一个进入的过渡动画决定一个Activity中的...

网友评论

      本文标题:添加过渡动效

      本文链接:https://www.haomeiwen.com/subject/kbyswktx.html