当前位置：极客教程 > Vue.js > Vue.js 教程 > Vue.js 同时使用过渡和动画

Vue.js 同时使用过渡和动画

Vue.js 同时使用过渡和动画

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

在某些情况下，您可能希望在同一元素上同时具有两者，例如，有一个由Vue.js触发的 CSS 动画，并且有一个悬停时的 CSS 过渡效果。在这些情况下，您必须显式声明您希望Vue.js关心的类型，并在类型属性中使用值为animation或transition。

显式过渡持续时间

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

<transition :duration = "1000"></transition>
JavaScript

duration属性与冒号符号一起在过渡元素上使用，如上面的代码所示。

如果想为进入和退出时分别指定持续时间，您可以按如下方式指定：

<transition :duration = "{ enter: 500, leave: 800 }">...</transition>
JavaScript

JavaScript Hooks

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

Index.html 文件:

<html>
   <head>
      <title>Vue.js Animation</title>
      <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    </head>
    <body>
    <div id = "trans">
         <button @click = "show = !show">
            <span style = "font-size:25px;">Toggle</span>
         </button>
         <transition  v-on:before-enter = "beforeEnter"
            v-on:enter = "enter"
            v-on:leave = "leave"
            v-bind:css = "false">
            <p v-if = "show" style = "font-size:25px;">This is an animation Example with velocity</p>
         </transition>
      </div>
      </script>
      <script src="index.js"></script>
   </body>
</html>
JavaScript

Index.js 文件:

var vm = new Vue({
            el: '#trans',
            data: {
               show: false
            },
            methods: {
               beforeEnter: function (el) {
                  el.style.opacity = 0
               },
               enter: function (el, done) {
                  Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
                  Velocity(el, { fontSize: '10px' }, { complete: done })
               },
               leave: function (el, done) {
                  Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
                  Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                  Velocity(el, {
                     rotateZ: '45deg',
                     translateY: '30px',
                     translateX: '30px',
                     opacity: 0
                  }, { complete: done })
               }
            }
         })
JavaScript

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

Index.css 文件:

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

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

输出:

Vue.js 同时使用过渡和动画

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

Vue.js 同时使用过渡和动画

Vue.js 同时使用过渡和动画

Vue.js 同时使用过渡和动画

示例解释

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

<transition  v-on:before-enter = "beforeEnter"
   v-on:enter = "enter"
   v-on:leave = "leave"
   v-bind:css = "false">
   <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>
JavaScript

在事件名称前添加前缀v-on。我们还在过渡中添加了一个属性v-bind:css = “false”，以便Vue.js将其识别为JavaScript转换。

这些方法在Vue.js实例中定义如下：

methods: {
   beforeEnter: function (el) {
      el.style.opacity = 0
   },
   enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
      Velocity(el, { fontSize: '10px' }, { complete: done })
   },
   leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
         rotateZ: '45deg',
         translateY: '30px',
         translateX: '30px',
         opacity: 0
      }, { complete: done })
   }
}
JavaScript

在每个方法中应用所需的转换。单击按钮时应用不透明度动画，并在动画完成时应用。还使用第三方库进行动画。

在初始渲染中应用转换

如果要在开始时添加动画，则必须将’appear’属性添加到转换元素中。请参见以下示例以更好地理解：

Index.html文件：

<html>
   <head>
      <title>Vue.js Animation</title>
      <link rel="stylesheet" href="index.css">
      <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
    </head>
    <body>
        <div id = "trans_2" style = "text-align:center">
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated bounceIn">
            <h3>This is BounceIn Animation Example</h3>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated swing">
            <h3>This is Swing Animation Example</h3>
         </transition>
         <transition
            appear
            appear-class = "custom-appear-class"
            appear-active-class = "animated rubberBand">
            <h3>This is RubberBand Animation Example</h3>
         </transition>
      </div>
      </script>
      <script src="index.js"></script>
   </body>
</html>
JavaScript

Index.js文件：

var vm =  new Vue({
            el: '#trans_2',
            data: {
               show: true
            }
         })
JavaScript

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

输出：

Vue.js 同时使用过渡和动画

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

Vue.js 教程

登录

找回密码？

注册