使用Vue-cli做一个APP封面过渡动画效果

Posted 2021-09-08 吃螃蟹的小孩

使用Vue-cli做一个APP过渡动画效果

• app.vue
• home.vue
• login.vue
• 结果

本人只略涉前端，不专业别喷，欢迎指正。常见人APP有一个封面，所以本人用粗鄙的方法实现数秒后动画跳转。

app.vue

<div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/login">Login</router-link>
  </div>
  <router-view/>

此处就正常创建的页面即可

home.vue

<template>
  <div class="home">
      <div id="box"></div>
  </div>
</template>

<script>
import anime from 'animejs/lib/anime.es.js';
export default {
  name: 'Home',
  data(){
    return{
      timer:'',
      count:0
    }
  },
  methods:{
    move(){
      anime({
      targets: '#box',
      translateX: {
        value: 250,
        duration: 800
      },
      rotate: {
        value: 360,
        duration: 1800,
        easing: 'easeInOutSine'
      },
      scale: {
        value: 2,
        duration: 1600,
        delay: 800,
        easing: 'easeInOutQuart'
      },
      delay: 250 // All properties except 'scale' inherit 250ms delay
      })
    },
    turnTo(){
      this.move()
      clearTimeout(this.timer)
      this.time=setTimeout(()=>{
          this.$router.push({name:'Login'})
      },4000)
    }
    },
  mounted(){
     this.turnTo()
  },
  beforeDestroy(){
    clearTimeout(this.timer)
  }
}
</script>
<style scoped>
#box{
  width: 100px;
  height: 100px;
  background-color: pink;
}
</style>

本人用的anime.js的动画效果，路由常规自己加吧

login.vue

<template>
    <div id="login">
        login
    </div>
</template>

<script>
export default {
    name: 'Login'
}
</script>

<style scoped>

</style>

接受跳转后的页面

结果

动画三秒后跳转login页面非常实用得劲