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

Posted 2022-12-03 阿呆攻防

使用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页面非常实用得劲