我要投稿

css3动画切换-css、js、vue实现动画效果，vue实现页面间无缝切换（上下左右滑动）

bendan520 css3

2023-08-22 0 6,830 百度已收录

进不了网站？换个网络试试！

前几天在做一个动画效果，使用的是vue框架。偶然发现vue上实现一些动态效果比较困难。比如我想做一个页面上下无缝滑动的效果。在vue上实现前面数据变化后js可以动态添加类名，但是使用transition标签（vue提供了为单个标签添加动画的标签）无法完成动态添加类名的js部分，所以，后来发现一个办法

动态页面效果

每个页面都单独用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部分css3动画切换，封装了上、下、左、右开关并进行了介绍。

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部分，因为我做的页面比较简单单一css3动画切换，所以动态添加类名是最简单的方法。大家不用介意，可以改变的

收藏 (0) 打赏

感谢您的支持，我会继续努力的!