1. Toy模板网首页
  2. > Toy博客

vue 动画（transition）

10月前 作者：一天一丢丢 分类：Toy博客 阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了vue 动画（transition）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、 实现原理

在插入、更新、移除 DOM 元素时，在合适的时候给元素添加样式类名，配合 CSS 样式使用，实现动画效果。

通俗来讲，就是将要进行动画操作的 DOM 元素用 transition 标签包裹起来。在此html元素运动前，运动中，运动后这三个时候 vue 会给此 DOM 元素添加不同的 class ，然后配合 CSS 样式，实现动画效果。

示例：

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <!-- Vue 的内置动画标签 transition -->
    <transition>
      <!-- 只能包含 1 个元素 -->
      <h1 v-show="bol">组件动画效果</h1>
      <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

<style>
/* 进入：始状态 */
.v-enter {
  transform: translateX(-100%);
  color: red;
}
/* 进入：末状态 */
.v-enter-to {
  transform: translateX(0);
  color: yellow;
}
/* 进入动画 */
.v-enter-active {
  transition: 10s;
  color: linear-gradient(red,yellow);;
}

/* 离开：始状态 */
.v-leave {
  transform: translateX(0);
}
/* 离开：末状态 */
.v-leave-to {
  transform: translateX(-100%);
}
/* 离开动画 */
.v-leave-active {
  transition: 1s;
}
</style>

二、 transition 标签

  • Vue 的内置动画标签: transition
  • transition 标签只能包含 1 个元素；如果里面写了多个元素，则只生效第一个
  • transition 包裹的标签需要设置 v-show / v-if 属性控制元素的显示

三、 动画 CSS 样式对应的类名

  • 进入：.v-enter 始状态、.v-enter-to 末状态、.v-enter-active 进入动画
  • 离开：.v-leave 始状态、.v-leave-to 末状态、.v-leave-active 离开动画
  • .v-enter 、 .v-leave 定义了动画的初始状态，在里面可以定义初始的位置，颜色，字体等。
  • .v-enter-to 、 .v-leave-to 定义了动画的最终状态，这两个类的定义最好和 DOM 的 class保持一致，否则动画结束后会瞬间从 .v-enter-to 、 .v-leave-to 的样式转变为 DOM 的样式（实例一，实例二）
  • .v-enter-active 、 .v-leave-active 定义了动画的渐变规则，比如是位置渐变的话会定义渐变的时间，路径；颜色渐变的话会定义颜色相关的渐变规则

3.1 实例一

会从红色渐变为黄色

<template>
    <div>
      <button @click="bol = !bol">隐藏/显示</button>
      <transition>
        <h1 v-show="bol" class="demo">组件动画效果</h1>
      </transition>
    </div>
  </template>
  
  <script>
  export default {
    name: "TestDemo",
    data() {
      return { bol: true };
    },
  };
  </script>
  
  <style>
  .v-enter-active,
  .v-leave-active {
    transition: 10s !important;
    color: linear-gradient(red,yellow) !important;
  }

  .demo {
    color: yellow;
  }

  .v-enter,
  .v-leave-to {
    transform: translateX(-50%);
    color: red;
  }
  </style>

3.2 实例二

会从红色渐变为黄色，然后瞬间变为黑色

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition>
      <h1 v-show="bol" class="demo">组件动画效果</h1>
    </transition>
  </div>
</template>
  
  <script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>
<style>
.v-enter,
.v-leave-to {
  transform: translateX(-50%);
  color: red;
}

.v-enter-to,
.v-leave {
  transform: translateX(0);
  color: yellow;
}

.v-enter-active,
.v-leave-active {
  transition: 10s !important;
  color: linear-gradient(red, yellow) !important;
}
</style>

四、 transition 标签的属性

4.1 name 属性

用于自动生成 CSS 动画类名

  • 如果 transition 标签元素没有设置 name 属性，则对应的动画类名为 v-XXX
  • 果设置了 name 属性，则对应的动画类名为 属性值-XXX
  • 当存在多个 tansition 标签时，我们可以通过 name 属性给各个 transition 标签指定不同的 CSS 动画效果

4.2 appear 属性

一开始就生效显示动画文章来源地址https://www.toymoban.com/news/detail-775415.html

4.3 mode 属性

  • in-out： 新元素先进行过渡，完成之后当前元素过渡离开
  • out-in： 当前元素先进行过渡，完成之后新元素过渡进入

4.4 示例

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <!-- Vue 的内置动画标签 transition -->
    <transition name="test" appear>
      <!-- 只能包含 1 个元素 -->
      <h1 v-show="bol">组件动画效果</h1>
      <!-- 需要设置 v-show / v-if 属性控制元素的显示 -->
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

<style>
.test-enter,
.test-leave-to {
  transform: translateX(-50%);
  color: red;
}

.test-enter-to,
.test-leave {
  transform: translateX(0);
  color: yellow;
}

.test-enter-active,
.test-leave-active {
  transition: 10s !important;
  color: linear-gradient(red,yellow) !important;
}
</style>

五、 transition-group 标签

  • transition 标签只能包含 1 个元素、 transition-group 标签可以包含多个元素
  • transition-group 标签里面的元素需要设置 key 属性，作为当前元素的唯一标识
  • 除此之外，其它用法都和 transition 标签一样
<template>
  <div id="app">
    <button @click="isEditing = !isEditing">切换</button>
    <transition-group appear>
      <h1 v-if="isEditing" key="save">Save</h1>
      <h1 v-if="!isEditing" key="edit">Edit</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { isEditing: true };
  },
};
</script>

<style>
h1 {
  transition: 3s;
  position: absolute;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
</style>

六、 JavaScript钩子函数

      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
  methods: {
    
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    console.log('beforeEnter');
    console.log(el);
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    console.log('enter');
    console.log(el);
    done()
  },
  afterEnter: function (el) {
    console.log('afterEnter');
    console.log(el);
  },
  enterCancelled: function (el) {
    console.log('enterCancelled');
    console.log(el);
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    console.log('beforeLeave');
    console.log(el);
  },
  leave: function (el, done) {
    console.log('leave');
    console.log(el);
    done()
  },
  afterLeave: function (el) {
    console.log('afterLeave');
    console.log(el);
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    console.log('leaveCancelled');
    console.log(el);
  }
  },

七、 vue实现动画的多种方法

7.1 transition

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition name="fade">
      <p v-if="bol">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  width: 100px;
}
p {
  border: 1px solid red;
  width: 300px;
}
</style>

7.2 animation + @keyframes

<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition name="bounce">
      <p v-show="bol" class="demo">组件动画效果</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>
<style>
.bounce-enter-active {
  animation: bounce-in 5s;
}
.bounce-leave-active {
  animation: bounce-in 5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

7.3 animate.css

  1. 安装：npm install animate.css
  2. 引入样式库：import "animate.css"
  3. 给指定的 transition 标签添加 name 属性 animate_animate、animate__bounce
  4. 配置 enter-active-class 属性，指定进入动画：在样式库中挑一个进入的样式值，作为 enter-active-class 属性值
  5. 配置 leave-active-class 属性，指定退出动画：在样式库中挑一个退出的样式值，作为 leave-active-class 属性值
<template>
  <div>
    <button @click="bol = !bol">隐藏/显示</button>
    <transition
      name="animate__animated animate__bounce"
      enter-active-class="animate__bounceIn"
      leave-active-class="animate__bounceOut"
    >
      <p v-show="bol" name="animate_animate">组件动画效果</p>
    </transition>
  </div>
</template>

<script>
import "animate.css";
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

7.4 JavaScript钩子

  1. 当只用 JavaScript 过渡时，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
  2. 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

7.5 Velocity.js

  1. 安装：npm install velocity-animate 
<template>
  <div id="app">
    <button @click="show = !show">显示/隐藏</button>
    <br />
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-show="show">hello</p>
    </transition>
  </div>
</template>

<script>
import Velocity from "velocity-animate";

export default {
  name: "App",
  data: function () {
    return {
      show: true,
    };
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0;
    },
    enter: function (el, done) {
      Velocity(
        el,
        {
          rotateZ: "0deg",
          translateY: "0px",
          translateX: "0px",
          opacity: 1,
        },
        { complete: done }
      );
    },
    leave: function (el, done) {
      Velocity(
        el,
        {
          rotateZ: "45deg",
          translateY: "30px",
          translateX: "30px",
          opacity: 0,
        },
        { complete: done }
      );
    },
  },
};
</script>

7.6 多个元素的过渡

<template>
  <div id="example-2">
    <transition name="fade" mode="out-in">
      <button v-if="isEditing" key="save" @click="isEditing = !isEditing">
        Save
      </button>
      <button v-else key="edit" @click="isEditing = !isEditing">Edit</button>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TransitionTest",
  data() {
    return {
      name: "TransitionTest",
      isEditing: false,
    };
  }
};
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 1s;
}
.fade-enter {
  opacity: 0;
  transform: translateX(50px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-50px);
}

#example-2 {
  position: relative;
  padding: 100px;
}
#example-2 button {
  position: absolute;
}
</style>

7.7 多个组件的过渡

<template>
  <div id="transition-components-demo">
    <button @click="view = 'VA'">a</button>
    <button @click="view = 'VB'">b</button>
    <transition name="component-fade" mode="out-in">
      <component v-bind:is="view"></component>
    </transition>
  </div>
</template>

<script>
import VA from "./VA.vue";
import VB from "./VB.vue";

export default {
  name: "TransitionTest",
  data() {
    return {
      view: "VA",
    };
  },
  components: {
    VA,
    VB,
  },
};
</script>
<style scoped>
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 2s ease;
}
.component-fade-enter,
.component-fade-leave-to {
  opacity: 0;
}
</style>

7.8 for循环怎么动画 （列表的进入/离开过渡）

<template>
  <div id="list-demo" class="demo">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "TransitionTest",
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
    };
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length);
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++);
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1);
    },
  },
};
</script>
<style scoped>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

参考

  • 【Vue】transition 标签的使用
  • Vue之transition
  • 过渡 & 动画

到了这里，关于vue 动画（transition）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • vue 动画（transition）

    在插入、更新、移除 DOM 元素时，在合适的时候给元素添加样式类名，配合 CSS 样式使用，实现动画效果。 通俗来讲，就是将要进行动画操作的 DOM 元素用 transition 标签包裹起来。在此html元素运动前，运动中，运动后这三个时候 vue 会给此 DOM 元素添加不同的 class ，然后配合

    2024年02月03日
    浏览(36)

  • CSS3 高级- 复杂选择器、内容生成、变形(transform)、过渡(transition)、动画(animation)

    兄弟选择器：选择平级元素的唯一办法 -适用：通过已知元素选择之后的平级兄弟元素时 1、相邻兄弟选择器: 2、通用兄弟选择器： 属性选择器： -通过元素的属性来定位元素 1、通用：基本用不着，太泛了 2、自定义：4种 1、精确条件： 2、模糊条件： 3、模糊条件：很少用，

    2024年04月09日
    浏览(55)

  • 前端设置div的显示与隐藏

    两种方式： 1.隐藏后释放占用的页面空间 通过设置display属性可以使div隐藏后释放占用的页面空间 2.隐藏后仍占有页面空间，显示空白 div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 其他方式

    2024年02月12日
    浏览(44)

  • vue折叠展开transition动画使用keyframes实现

    需求，我正常的菜单功能有隐藏与显示功能，需要增加动画 打开的时候宽度从0到300，关闭的时候，宽度从300到0

    2024年01月25日
    浏览(50)
  • Vue3 Transition组件给页面切换加动画效果

    Vue3 Transition组件给页面切换加动画效果

    本文分享一个Vue页面组件之间切换的动画效果，主要应用在移动端设备，使用户在切换页面或者切换组件的时候交互体验感更好一些，使用的是Vue3自带的Transition组件。 先简单介绍一下 Transition 组件，来自官方介绍： Transition 是一个内置组件，这意味着它在任意别的组件中都

    2024年02月09日
    浏览(41)
  • ＜ 每日小技巧： 基于Vue状态的过渡动画 - Transition 和 TransitionGroup＞

    ＜ 每日小技巧： 基于Vue状态的过渡动画 - Transition 和 TransitionGroup＞

    Vue 提供了两个内置组件，可以帮助用户制作基于状态（ v-if / v-show ）变化的过渡和动画： Transition 会在一个元素或组件 进入 和 离开 DOM 时应用动画。本章节会介绍如何使用它。 TransitionGroup 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。 TransitionGrou

    2024年02月02日
    浏览(37)
  • vue: v-show 和 v-if 指令控制盒子的显示隐藏

    vue: v-show 和 v-if 指令控制盒子的显示隐藏

    1. v-show     语法:  v-show=\\\"布尔值\\\"    (true显示, false隐藏)     原理:  实质是在控制元素的 css 样式,  `display: none;` 2. v-if       语法: v-if=\\\"布尔值\\\"   (true显示, false隐藏)     原理:  实质是在动态的 创建 或者 删除 元素节点 应用场景:          1. 如果是频繁的切换显

    2024年02月09日
    浏览(59)

  • vue transition结合animate.css动画库

    安装 npm install animate.css --save 在main.js中引用 import animated from \\\'animate.css\\\' Vue.use(animated) 在transition标签上使用 此处有坑：4.x版本的animate在使用的时候要在动画名称加前缀animate__动画名 ，其他版本的不用直接使用动画名称就行 在某一项被插入或者移出时，它周围的元素会立即发

    2024年02月20日
    浏览(42)

  • vue3项目中，点击某个div以外的区域，将这个div隐藏

    使用 @click 来监听 div 的点击事件，并通过 v-if 来控制 div 的显示与隐藏。在组件的 mounted 钩子函数中，通过 document.addEventListener 添加了一个点击事件监听器，用于监听整个页面的点击事件。当点击事件发生时，会调用 handleClickOutside 方法来检查是否需要隐藏 div。最后，在组件

    2024年02月13日
    浏览(36)
  • 2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中

    2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中

    如上图第二行子元素宽度会跟随第一行宽度 解决方案： 对第二行设置： width: max-content; 使其宽度跟随自身内容 如上图，左侧宽高为112rpx，宽度不生效 解决方案： 对左侧图片设置宽高的同时， 设置最小宽高 效果如下： 例1：

    2024年02月09日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包