vue 인터페이스 슬라이딩 효과 실현

본 논문 의 사례 는 vue 가 인터페이스 미끄럼 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
프로젝트 수요+효과 도
1.프로젝트 요구 사항
[아래쪽 내 비게 이 션 표시 줄 을 클릭 하면 페이지 를 전환 할 때 미 끄 러 지 는 효과 가 있 습 니 다.]
2.효과 도

코드+키 코드 분석
1.코드
Botnav.vue 탐색 표시 줄 인터페이스

<template>
    <div>
        <transition :name="transitionName">
            <router-view class="Router"></router-view>
        </transition>
 <template>    
  
 <script>    
 export default {
  data () {
    return {
     //       
      transitionName:'slide-right',    
     } 
</script>   

<style lang="stylus">  
      .Router
            position absolute
            width 100%
            transition  all 0.8s ease 
        .silde-left-enter,.slide-right-leave-active    
            opacity 0
            -webkit-transform  translate(100%,0)
            transform   translate(100%,0)
        .silde-left-leave-active,.slide-right-enter
            opacity 0
            -webkit-transform translate(-100%,0)
            transform  translate(-100%,0) 
</style>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.