Vuejs教程-Vue.js 过渡和动画

Vue.js 提供了几种方法来为应用程序在向 DOM 插入、更新或移除元素时应用过渡和动画效果。这些过渡和动画效果用于使应用程序对用户具有吸引力和交互性。

Vue.js 还提供了一些工具来执行以下任务：

提供类并自动将这些类应用于 CSS 过渡和动画。
可以集成第三方 CSS 动画库，例如 Animate.css。
可以使用 JavaScript 在过渡钩子期间直接操作 DOM。
可以集成第三方 JavaScript 动画库，例如 Velocity.js。

Vue.js 过渡

有多种方法可以在将元素从 DOM 中插入、更新或移除时应用过渡。Vue.js 提供了一个内置的过渡包装组件，在输入/离开过渡时必须使用它来包裹任何元素或组件。以下是过渡效果的语法。

语法:

<transition name="name_of_the_transition">
  <div></div>
</transition>

让我们通过一个简单的示例来理解过渡效果的概念和工作原理。

Vue.js 渐变过渡

示例 1

Index.html 文件:

<html>
  <head>
    <title>Vue.js Transition</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <style>
      .fade-enter-active, .fade-leave-active {
        transition: opacity 3s;
      }
      .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
      }
    </style>
    <div id="databinding">
      <p>Click at the below button to see transition effect.</p>
      <button v-on:click="show = !show">Click Here</button>
      <transition name="fade">
        <p v-show="show" v-bind:style="styleobj">This is a Fade Transition Example</p>
      </transition>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Index.js 文件:

var vm = new Vue({ 
  el: '#databinding',
  data: { 
    show: true,
    styleobj: {
      fontSize: '30px',
      color: 'red'
    } 
  },
  methods: {
  }
})

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件:

html, body {
  margin: 5px;
  padding: 0;
}

执行程序后，您将看到以下输出:

输出:

当您点击按钮时，文本将在3秒内淡出。参见以下图片:

示例解释

在上面的例子中，我们创建了一个名为“Click Here”的按钮，我们可以将变量 show 的值更改为 true 或 false，反之亦然。我们在 p 标签中编写了 v-show 指令，只有在变量为 true 时才显示文本元素。p 标签包裹在 transition 元素中，如下所示:

<transition name="fade">
  <p v-show="show" v-bind:style="styleobj">This is a Fade Transition Example</p>
</transition>

这是一个 渐变过渡 的示例。以下是过渡中使用的一些标准类:

v-enter: 在元素更新或添加到 HTML 元素之前，会首先调用该过渡类。这指定了起始状态。

v-enter-active: 用于定义进入过渡阶段的延迟、持续时间和缓动曲线。此类指定整个进入阶段的活动状态，始终在整个进入阶段中可用。

v-leave: 当触发或删除离开过渡时，将添加此过渡类。

v-leave-active: 在离开阶段使用此过渡类。当过渡完成时，此类会自动删除。此类指定离开阶段的延迟、持续时间和缓动曲线。

每个过渡类都会以过渡的名称为前缀。例如，对于 fade 过渡，类的名称将是 .fade_enter，.fade_enter_active，.fade_leave，.fade_leave_active。

在上面的示例中，我们将 .fade_enter_active 和 .fade_leave_active 类一起定义，它在开始和离开阶段都应用了过渡。

在这里，我们在 3 秒内将 opacity 属性更改为 0。

Vue.js shiftx 过渡

让我们看另一个例子，在此示例中，我们在单击按钮时使用图片在 x 轴上移动 100 像素。

在这里，我们使用 shiftx 过渡。这个 transform 属性将把图片在 x 轴上向右移动 100 像素。参见以下示例:

示例 2