css、js、vue实现动画效果，vue实现页面间无缝切换(上下左右滑动)

前几天在做一个动画效果，用的是vue框架，无意间发现在vue上部分动态效果实现是比较困难的，就比如当时想做一个页面上下滑动无缝切换的一个效果，如果用js实现在vue上总是前一个数据变化之后才能实现js动态添加类名，而采用transition标签(vue提供的为单标签添加动画的标签)却不能完成js部分动态添加类名，于是，后来找到了解决办法

动态页面效果

<transition>
        <div :class="{containerOne:sure,'pt-page-moveToTop':as1,'pt-page-moveFromBottom':as2}" v-show="change == 1">
        </div>
        </transition>
        <transition>
        <div :class="{containerTwo:sure,'pt-page-moveToTop':as3,'pt-page-moveFromBottom':as4}" v-show="change == 2">
          <TestOne/>
        </div>
        </transition>
        <transition>
        <div :class="{containerThree:sure,'pt-page-moveToTop':as5,'pt-page-moveFromBottom':as6}" v-show="change == 3">
        </div>
        </transition>
        <transition>
        <div :class="{containerFour:sure,'pt-page-moveToTop':as1,'pt-page-moveFromBottom':as2}" v-show="change == 4">
        </div>
        </transition>

每一个页面使用transition标签单独包裹，采用v-show动态判断页面显示与隐藏，

.pt-page-moveToLeft {
	-webkit-animation: moveToLeft .6s ease both;
	-moz-animation: moveToLeft .6s ease both;
	animation: moveToLeft .6s ease both;
}

.pt-page-moveFromLeft {
	-webkit-animation: moveFromLeft .6s ease both;
	-moz-animation: moveFromLeft .6s ease both;
	animation: moveFromLeft .6s ease both;
}

.pt-page-moveToRight {
	-webkit-animation: moveToRight .6s ease both;
	-moz-animation: moveToRight .6s ease both;
	animation: moveToRight .6s ease both;
}

.pt-page-moveFromRight {
	-webkit-animation: moveFromRight .6s ease both;
	-moz-animation: moveFromRight .6s ease both;
	animation: moveFromRight .6s ease both;
}

.pt-page-moveToTop {
	-webkit-animation: moveToTop .6s ease both;
	-moz-animation: moveToTop .6s ease both;
	animation: moveToTop .6s ease both;
}

.pt-page-moveFromTop {
	-webkit-animation: moveFromTop .6s ease both;
	-moz-animation: moveFromTop .6s ease both;
	animation: moveFromTop .6s ease both;
}

.pt-page-moveToBottom {
	-webkit-animation: moveToBottom .6s ease both;
	-moz-animation: moveToBottom .6s ease both;
	animation: moveToBottom .6s ease both;
}

.pt-page-moveFromBottom {
	-webkit-animation: moveFromBottom .6s ease both;
	-moz-animation: moveFromBottom .6s ease both;
	animation: moveFromBottom .6s ease both;
}

/* fade */

.pt-page-fade {
	-webkit-animation: fade .7s ease both;
	-moz-animation: fade .7s ease both;
	animation: fade .7s ease both;
}

/* move from / to and fade */

.pt-page-moveToLeftFade {
	-webkit-animation: moveToLeftFade .7s ease both;
	-moz-animation: moveToLeftFade .7s ease both;
	animation: moveToLeftFade .7s ease both;
}

.pt-page-moveFromLeftFade {
	-webkit-animation: moveFromLeftFade .7s ease both;
	-moz-animation: moveFromLeftFade .7s ease both;
	animation: moveFromLeftFade .7s ease both;
}

.pt-page-moveToRightFade {
	-webkit-animation: moveToRightFade .7s ease both;
	-moz-animation: moveToRightFade .7s ease both;
	animation: moveToRightFade .7s ease both;
}

.pt-page-moveFromRightFade {
	-webkit-animation: moveFromRightFade .7s ease both;
	-moz-animation: moveFromRightFade .7s ease both;
	animation: moveFromRightFade .7s ease both;
}

.pt-page-moveToTopFade {
	-webkit-animation: moveToTopFade .7s ease both;
	-moz-animation: moveToTopFade .7s ease both;
	animation: moveToTopFade .7s ease both;
}

.pt-page-moveFromTopFade {
	-webkit-animation: moveFromTopFade .7s ease both;
	-moz-animation: moveFromTopFade .7s ease both;
	animation: moveFromTopFade .7s ease both;
}

.pt-page-moveToBottomFade {
	-webkit-animation: moveToBottomFade .7s ease both;
	-moz-animation: moveToBottomFade .7s ease both;
	animation: moveToBottomFade .7s ease both;
}

.pt-page-moveFromBottomFade {
	-webkit-animation: moveFromBottomFade .7s ease both;
	-moz-animation: moveFromBottomFade .7s ease both;
	animation: moveFromBottomFade .7s ease both;
}
@-webkit-keyframes moveToLeft {
	to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveToLeft {
	to { -moz-transform: translateX(-100%); }
}
@keyframes moveToLeft {
	to { transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeft {
	from { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes moveFromLeft {
	from { -moz-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
	from { transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight { 
	to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveToRight { 
	to { -moz-transform: translateX(100%); }
}
@keyframes moveToRight { 
	to { transform: translateX(100%); }
}

@-webkit-keyframes moveFromRight {
	from { -webkit-transform: translateX(100%); }
}
@-moz-keyframes moveFromRight {
	from { -moz-transform: translateX(100%); }
}
@keyframes moveFromRight {
	from { transform: translateX(100%); }
}

@-webkit-keyframes moveToTop {
	to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveToTop {
	to { -moz-transform: translateY(-100%); }
}
@keyframes moveToTop {
	to { transform: translateY(-100%); }
}

@-webkit-keyframes moveFromTop {
	from { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveFromTop {
	from { -moz-transform: translateY(-100%); }
}
@keyframes moveFromTop {
	from { transform: translateY(-100%); }
}

@-webkit-keyframes moveToBottom {
	to { -webkit-transform: translateY(100%); }
}
@-moz-keyframes moveToBottom {
	to { -moz-transform: translateY(100%); }
}
@keyframes moveToBottom {
	to { transform: translateY(100%); }
}

@-webkit-keyframes moveFromBottom {
	from { -webkit-transform: translateY(100%); }
}
@-moz-keyframes moveFromBottom {
	from { -moz-transform: translateY(100%); }
}
@keyframes moveFromBottom {
	from { transform: translateY(100%); }
}

上面是css部分 上面封装上下左右各种切换引入即可，

export default {
  name: 'App',
  components: {
    TestOne
  },
  data () {
    return {
      active: 1,
      sure: true,
      as1: false,
      as2: false,
      as3: false,
      as4: false,
      as5: false,
      as6: false,
      change: 2
    }
  },
  methods: {
    handleClickNav (i) {
      this.active = i
    },
    handleClickBtn () {
      this.change += 1
      console.log(this.change)
      // let lastPage = this.change - 1
      // let nowPage = this.change
      // const inClass = 'pt-page-moveToTop' // 定义出场动画
      // const outClass = 'pt-page-moveFromBottom' // 定义入场动画
      if (this.change === 2) {
        this.as1 = true
        this.as4 = true
      } else if (this.change === 3) {
        this.as1 = false
        this.as4 = false
        this.as3 = true
        this.as6 = true
      } else if (this.change === 4) {
        this.as3 = false
        this.as6 = false
        this.as5 = true
        this.as2 = true
      }
    }
  }
}

js部分，因为我做的页面比较简单且单一所以类名动态添加采用了最简单的做法，各位大佬别介意，你们可以改改