Vue JS实现过渡动画

最新推荐文章于 2025-06-11 11:20:27 发布

Lvdon9

最新推荐文章于 2025-06-11 11:20:27 发布

阅读量479

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37995109/article/details/86683170

Vue 专栏收录该内容

53 篇文章

订阅专栏

本文介绍如何在Vue.js中使用自定义的jQuery动画实现元素的过渡效果，包括元素进入前、进入过程及离开的状态控制。通过Vue的transition组件结合jQuery的animate方法，实现了动态的元素显示与隐藏动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div id="app">

    <!-- <button v-on:click="show = !show">toggle</button> -->
    <button v-on:click="show=!show">toggle</button>    
    <!--JS动画过渡, JQUERY引入在index.html-->
     <!--1,进入之前
         2,进入过程中
         3,离开
       -->
    <transition
     @before-enter="beforeEnter"
     @enter="enter"
     @leave="leave"
     :css="false">
      <p class="animate-p" v-show="show">i am show</p>
    </transition>
  </div>
</template>

<script>
//如果要使用vue全局.
import Vue from 'vue'
import Coma from './components/a'
import Comb from './components/b'
export default {
  components:{
    Coma,Comb
  },
  data() {
    return {
      currentView:'Coma',
      myValue:'',
       myVal:'',
      show:"",
    }
  },
  computed:{

  },

  methods:{
    //el是animate-p
    beforeEnter:function(el){
      $(el).css({
        left:'-500px',
        opacity:0
      })
    },
    enter:function(el,done){
      $(el).animate({
        left:0,
        opacity:1
      },{
        duration:1500,
        complete:done
      })
    },
    leave:function(el,done){
      $(el).animate({
        left:'500px',
        opacity:0,
      },{
        duration:1500,
        complete:done
      }
      )
    }
  }
};
</script>
<style>
.animate-p{
  position: absolute;
  top: 0;
  left: 0;
}
</style>