首页 前端知识 css、js、vue实现动画效果,vue实现页面间无缝切换(上下左右滑动)

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

2024-05-24 08:05:18 前端知识 前端哥 818 550 我要收藏

前几天在做一个动画效果,用的是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部分,因为我做的页面比较简单且单一所以类名动态添加采用了最简单的做法,各位大佬别介意,你们可以改改

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9260.html
标签
评论
发布的文章

用JS生成本周日期代码

2024-04-18 17:04:15

js 递归函数

2024-05-31 10:05:46

jQuery是什么?如何使用?

2024-03-12 01:03:24

js延迟加载的六种方式

2024-05-30 10:05:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!