vue 中的动画

最新推荐文章于 2025-04-08 19:41:38 发布
最新推荐文章于 2025-04-08 19:41:38 发布
阅读量191 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44106237/article/details/126982233
版权

 1. 使用过渡类名

HTML结构：

 <div id="app">

<input type="button" value="动起来" @click="myAnimate">
  <!-- 使用 transition 将需要过渡的元素包裹起来 -->
  <transition name="fade">
    <div v-show="isshow">动画哦</div>
  </transition>
</div>

VM 实例：

// 创建 Vue 实例，得到 ViewModel

var vm = new Vue({
el: '#app',
data: {
  isshow: false
},
methods: {
  myAnimate() {
    this.isshow = !this.isshow;
  }
} 

定义两组类样式：

/* 定义进入和离开时候的过渡状态 */

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.2s ease;
    position: absolute;
  }
​
  /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    transform: translateX(100px);
  }

案例：注意未起名默认是v

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    #app {
      position: relative;
    }
    .circle {
      font-size: 50px;
      color: red;
    }
    #keng {
      color: aqua;
      font-size: 200px;
      position: absolute;
      top: 350px;
      left: 225px;
      width: 50px;
      height: 50px;
    }
    .v-leave {
      transform: translate(0px, 0px);
    }
    .v-leave-to {
      transform: translate(300px, 500px);
    }
    .v-leave-active {
      transition: all 2s;
    }
    .pool-enter-active,.pool-leave-active{
            transition: all 2s;
        }
  </style>
</head>
<body>
  <body>
    <div id='app'>
      <button @click="flag = !flag">加入购物车</button>
      <transition >
        <div class="circle" v-show="flag">☀</div>
      </transition>
      <transition name="pool">
        <div id="keng" v-show="flag">🕳</div>
      </transition>
    </div>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          flag: true,
        },
        methods: {
          
        },
      })
    </script>
  </body>
</body>
</html>

 2.使用第三方css动画库

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

上面引入版本是4以上时的案例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    //4以上的版本需要加animate__

  <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
</head>
<body>
  <div id='app'>
    <button @click="show = !show">
      阿斯塔特
    </button>
    <transition name="custom-classes-transition" enter-active-class="animate__animated animate__zoomOutDown"
      leave-active-class="animated bounceOutRight">
      <p v-if="show">第一军团没有秘密</p>
    </transition>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        show: true
      },
      methods: {
      },
    })
  </script>
</body>
</html>

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet">

上面引入版本是4以下时的案例：

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
    <div id='app'>

        <button @click="show = !show">
            Toggle render
          </button>
          <transition
            name="custom-classes-transition"
            enter-active-class="animated slideInRight"
            leave-active-class="animated bounceOutRight"
          >
            <p v-if="show">hello</p>
          </transition>
    </div>


    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
        },
    })
    </script>
</body>
</html>

3.使用动画钩子函数 

定义 transition 组件以及三个钩子函数：

<div id="app">

  <input type="button" value="切换动画" @click="isshow = !isshow">
  <transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
    <div v-if="isshow" class="show">OK</div>
  </transition>
</div>

定义三个 methods 钩子方法：

methods: {

      beforeEnter(el) { // 动画进入之前的回调
        el.style.transform = 'translateX(500px)';
      },
      enter(el, done) { // 动画进入完成时候的回调
        el.offsetWidth;
        el.style.transform = 'translateX(0px)';
        done();
      },
      afterEnter(el) { // 动画进入完成之后的回调
        this.isshow = !this.isshow;
      }

}

定义动画过渡时长和样式：

.show{

transition: all 0.4s ease;

}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        .show{
                transition: all 0.4s ease;
            }
    </style>
</head>

<body>
    <div id='app'>
        <input type="button" value="切换动画" @click="isshow = !isshow">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div v-if="isshow" class="show">OK</div>
            <div>121</div>
        </transition>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                isshow:true
            },
            methods: {
                beforeEnter(el) { // 动画进入之前的回调
                    el.style.color = 'red'
                    el.style.transform = 'translateX(500px)';
                },
                enter(el, done) { // 动画进入完成时候的回调
                    // 这个需要加
                    el.offsetWidth;
                    el.style.transform = 'translateX(0px)';
                    // 这个方法表示完成
                    done();
                },
                afterEnter(el) { // 动画进入完成之后的回调
                    // this.isshow = !this.isshow;
                }
            }
        })
    </script>
</body>

</html>

4.v-for的列表过渡

 定义过渡样式：

<style>

  .list-enter,
  .list-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }
​
  .list-enter-active,
  .list-leave-active {
    transition: all 0.3s ease;
  }
</style>

定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

<div id="app">

  <input type="text" v-model="txt" @keyup.enter="add">
  <transition-group tag="ul" name="list">
    <li v-for="(item, i) in list" :key="i">{{item}}</li>
  </transition-group>
</div>

定义 VM中的结构：

  // 创建 Vue 实例，得到 ViewModel

  var vm = new Vue({
    el: '#app',
    data: {
      txt: '',
      list: [1, 2, 3, 4]
    },
    methods: {
      add() {
        this.list.push(this.txt);
        this.txt = '';
      }
    }
  }); 

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .v-enter{
            transform: translateX(-200px);
        }
        .v-enter-to{
            transform: translateX(0px);
        }
        .v-enter-active{
            transition: all 2s;
        }
        .v-leave{
            transform: translateX(0px); 
        }
        .v-leave-to{
            transform: translateX(200px);
        }
        .v-leave-active{
            transition: all 2s;
        }
        .box{
            width: 500px;
            margin: auto;
        }

        .v-move{
        transition: all 0.8s ;
        }
        .v-leave-active{
        position: absolute;
        }
        .v-enter-active{
        position: absolute;
        }
    </style>
</head>
<body>
    <div id='app'>
        <button @click="flag = !flag"> 点我</button>
        <button @click="changeList"> 点我2</button>
        <transition-group tag="ul">
            <div class="box" v-if="flag"  v-for="item in list" :key="item">
                {{item}}
            </div>
        </transition-group>


    </div>


    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            flag:true,
            list:[4,5,6,7,8,9]
        },
        methods: {
            changeList(){
                this.list.push(this.list[this.list.length-1] + 1)
            }
        },
    })
    </script>
</body>
</html>

5.列表的排序过渡

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。

v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：

.v-move{

transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}

 

Vue中动画的实现 从基本动画，到炫酷动画。看这一篇就够了
New前端工厂的博客
08-18 2万+
文章目录Vue中的基本动画实现动画类名的重定义使用第三方的动画库我就选择其中一个库做示范其他都一样 Vue中的基本动画实现 直接一点，基本动画的步骤 在需要加动画的地方，加入transition <transition> <P v-if="isNum">我是一只小小鸟</P> </transition&g...
前端与移动开发之vue-day2（5）
weixin_33670713的博客
11-15 151
使用过渡类名HTML结构： <div id="app"> <input type="button" value="动起来" @click="myAnimate"> <!-- 使用 transition 将需要过渡的元素包裹起来 --> <transition name="fade"> <div v-show=...
前端与移动开发之vue-day1（1）
weixin_33910137的博客
11-14 278
课程介绍前5天： 都在学习Vue基本的语法和概念；打包工具 Webpack , Gulp后5天： 以项目驱动教学；什么是Vue.jsVue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起...
Vue知识点（5）-- 动画
最新发布
m0_57036170的博客
04-08 669
CSS 动画是 Vue3 中实现组件动画效果的高效方式，主要通过 CSS和keyframes动画。
003 Vue动画
weixin_30821731的博客
08-24 197
一： 0.说明 　　在进入/离开的过渡中，会有 6 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 ...
Vue2 消息订阅与发布
qq_53374893的博客
08-12 451
实现任何框架的消息订阅发布。
Vue——动画
奔跑的程序员
09-09 458
&lt;style&gt; .box{ width: 100px; height: 100px; background-color: yellow; } /* v-if="true" 进入动画之前 入场的一个初始化 */ .slide-enter{ ...
详解Vue中过度动画效果应用
08-30
Vue 中过度动画效果应用详解 Vue 中过度动画效果应用是一种常用的前端动画效果，可以在网页中添加交互性和视觉吸引力。本文将详细介绍 Vue 中的过度动画效果应用，包括实现动画过渡效果的几种方式和相关的 CSS 样式...
vue实现动画，点击实现隐藏显示
04-11
在Vue.js中实现动画以及点击事件来控制元素的隐藏与显示是前端开发中常见的需求。Vue.js是一个轻量级的JavaScript框架，它提供了强大的数据绑定和组件化功能，同时也内置了方便的过渡效果系统，使得在DOM操作时可以...
Vue学习之旅Part7：三种Vue的动画实现方式及列表的动画效果
01-08
在Vue中 有三种动画的实现方式 分别是： 使用过渡类名实现 使用第三方animate.css实现 使用钩子函数实现 下面将一一介绍： 1、使用过渡类名实现 首先 来了解一下动画的过渡类名： ( 这是我在Vue官网找到的一个示意...
vue实现循环切换动画
10-17
在Vue.js框架中，实现循环切换动画是一个常见的需求，特别是在实现类似轮播图、页面过渡效果等场景时，我们需要动画能够在指定元素之间循环流动，使用户体验更加平滑和富有吸引力。接下来，我们将详细介绍在Vue中...
vue动画
2301_76428778的博客
03-19 795
介绍了在Vue中实现动画的多种方式。主要包括操作CSS的transition或animation属性，使用<transition>标签，以及引入第三方动画库Animate.css。通过操作CSS，可以在DOM元素插入、更新或移除时添加样式类名来触发动画。<transition>标签用于包裹目标元素，通过name属性定义类名前缀，并利用appear属性实现初始渲染时的动画。Animate.css的使用则需要先安装并导入该库，然后通过指定相应的类名来应用预设的动画效果。每种方式都有其适用场景和具体实现步骤，可根
Vuex学习（四）
反手一个bug的博客
11-22 232
Vue动画 写了一个比较基础的实例 Vue.html &lt;div id="app"&gt; &lt;button v-on:click="show=!show"&gt;点我渐变&lt;/button&gt; &lt;transition name="fade"&gt; &lt;p v-show="show" v-bind:
Vue动画
denghuocc
04-21 297
Vue中的动画 为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能； 1 使用过渡类名 HTML结构： <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <transition> <h3 v-if="flag...
vue-动画
m0_53614495的博客
09-23 5933
Vue过渡动画的核心原理依然是采用css类是实现的，只是vue帮助我们在组件的不同生命周期自定切换不同的css类。Vue中默认提供一个名为transition的内置组件，可以用其来包装要展示过渡动画的组件。transition组件的name属性用来设置要执行的动画名称，Vue中约定了一系列css类名规则来定义各个过渡过程中的组件状态。x-enter-from类在组件即将被插入页面时添加到组件上，可以理解为组件的初始状态。
vue---动画
XUELUO123456789的博客
06-17 309
一.通过过滤类名实现动画 使用过滤类名实现动画： 1. 添加 transition组件包住元素 2. 设置样式 .v-enter，v-enter-to…和设置触发动画的事件 3. 设置元素 v-if或者v-show - v-enter：动画进入之前的初始状态 - v-enter-to：动画进入之后的结束状态 - v-enter-active：动画进入的时间段 ...
vue中动画效果怎么做
02-22
Vue 中可以使用多种不同的动画效果，比如使用 transition 组件，可以实现 CSS 过渡效果；使用 JavaScript 动画库，可以实现复杂的动画效果；还可以使用动态组件，实现组件间的切换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值