同时使用过渡和动画

Vue.js 需要附加事件监听器，以了解过渡何时结束。 这可能是 transitionend 或 animationend，具体取决于您应用的 CSS。 如果您仅使用第一种或第二种类型，Vue.js 可以自动检测正确的类型。 但是，在您必须同时使用过渡和动画的情况下，您可以显式声明类型。

在某些情况下，您可能希望在同一元素上同时使用两者，例如，让 Vue.js 触发 CSS 动画，以及悬停时的 CSS 过渡 效果。 在这些情况下，您将不得不在 type 属性中显式声明您希望 Vue.js 关注的类型，其值为 animation 或 transition。

显式过渡持续时间

这是 Vue.js 2.2.0+ 版本中引入的新功能。这用于使用 Vue.js 在元素上同时应用过渡和动画。默认情况下，Vue.js 必须等待 transionend 和 animationend 事件，以检测动画或过渡是否完成。在这种情况下，当过渡导致延迟时，我们可以按如下方式显式应用持续时间

duration 属性与过渡元素上的 : 符号一起使用，正如您在上面的代码中看到的那样。

如果您想分别指定进入和离开情况的持续时间，您可以按如下方式指定它

JavaScript 钩子

过渡类可以使用 JavaScript 作为方法调用。 您可以在属性中定义 JavaScript 钩子。 让我们看一个例子来很好地理解这个概念

Index.html 文件

Index.js 文件

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

Index.css 文件

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

输出

当您单击 “切换” 按钮时，您可以看到过渡和动画。 请看以下输出

示例说明

在上面的示例中，使用 js 方法在过渡元素上执行动画。 过渡上的方法应用如下

在事件的名称前面添加一个前缀 v-on。 我们还在过渡上添加了一个属性 v-bind:css = "false"，以便 Vue.js 将其理解为 JavaScript 过渡。

这些方法定义如下：

我们在上述每种方法中都应用了所需的过渡。 单击按钮时，以及动画完成时，应用了不透明度动画。 还使用了第三方库进行动画处理。

初始渲染时的过渡

如果您想在开始时添加动画，您必须将“appear”属性添加到过渡元素。 请看以下示例以更好地理解它

Index.html 文件

Index.js 文件

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

输出