Vue动画工具及特效

最新推荐文章于 2025-05-29 08:40:28 发布

原创

最新推荐文章于 2025-05-29 08:40:28 发布 · 置顶 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.动画

本文介绍了Vue中实现动画的方法，包括单元素/组件的过渡，利用第三方动画库animate.css，商品进入购物车的轨迹动画，以及transition-ground实现多元素控制。通过设置v-if和transition标签配合实现元素动态显示隐藏，结合animate.css实现不同动画效果，并详细讲解了商品动画的三个阶段函数。同时，提到了transition-ground用于多元素动画控制，可以设置appear和tag属性来定制行为。

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

vue动画部分，这部分难度主要在于动画代码的固定形式，比较繁琐复杂，举出几个实例。

1.单元素/组件的过渡

资源包：

<script src="node_modules/vue/dist/vue.js"></script>

body部分：

1.若想反复点击实现隐藏/出现状态循环交替，再标签内设置v-if=“flag”,在data中设置flag=false/true（false代表初始成隐藏标签，true为显示标签），在触发点击事件的标签上添加：@click=flag=!flag，即每次点击呈现相对立的状态。
2.transition标签包裹需要被动画控制的元素。
3.若代码页中有多个不同的动画效果，可以给transition标签命名，也就是属性name=""，并与style中的选择器连用（具体操作样式部分说。）


<body>
<div id="root">


    <button @click="flag=!flag">点点点</button>
    //transition包裹需要被动画控制的元素
    //再vue中，transition可以是一个标签（元素）
  <transition>
    <h1 v-if="flag">王阿赫</h1>
  </transition>
   <transition name="my">
    <h1 v-if="!flag">安小瓜</h1>
  </transition>
</div>

<script>

    new Vue({
   
   
        el: "#root",
        data: {
   
   
            flag:false

        },
        methods: {
   
   }
    })
</script>
</body>

style部分：

1.v-enter和v-leave-to分别代表动画进入和离开终止时的状态，是两个时间点。（元素此刻的效果）
.v-enter和.v-leave-to 分别代表入场动画和离场动画的动画，是两个时间段。（元素所需完成的动画）
2.若body中的transition给出name名，则将选择器中的"v"替换成”name名“。

    <style>

        /*.v-enter,.v-leave-to 是一个时间点
            enter是还没进入时的状态
            leave-to：动画离开之后的终止状态*/
         .v-enter,.v-leave-to{
   
   
             opacity: 0;
            transform: translateX(100px);
             color:red;
         }
        /*入场动画和离场动画的时间段*/
        .v-enter-active,.v-leave-active{
   
   
            transition:all 1s linear;

        }
        .my-enter,.my-leave-to{
   
   
            opacity: 0