Vue.js是一款流行的JavaScript框架，它的过渡动画功能非常强大。Vue的过渡动画采用了CSS3的transition属性，通过对元素改变的监听，实现动画效果的加入。

transition属性的基本用法：

    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-active {
      opacity: 0;
    }

示例代码中，.fade-enter-active 和 .fade-leave-active是CSS类名，.fade-enter、.fade-leave-active是子类，代表元素切换到存在状态或切换到不存在状态时，动画的持续时间和动画效果。其中opacity为透明度属性，.5s为动画时间。

接下来，我们实现一个左右滑动的过渡效果：

    .slide-fade-enter-active {
      transition: all .3s ease;
    }
    
    .slide-fade-leave-active {
      position: absolute;
      top: 0;
      right: 0;
      transition: all .3s ease;
    }
    
    .slide-fade-enter, .slide-fade-leave-active {
      transform: translateX(100%);
      opacity: 0;
    }

示例代码中，.slide-fade-enter-active 和 .slide-fade-leave-active 分别表示元素进入和离开状态时的动画类，transition属性为all，动画时间为.3s，时间缓动为ease；.slide-fade-enter和.slide-fade-leave-active表示元素进入和离开时的初始状态，opacity为0，将position设置为absolute，将元素移动到页面右侧。

通过以上代码，我们可以实现一个页面切换时左右滑动的过渡效果。