Vue.js动画

在Vue.js应用程序中，我们可以采用与在先前示例中应用过渡相同的方式来应用动画。动画还有一些类必须声明才能获得动画效果。

Vue.js过渡和Vue.js动画之间的唯一区别是，在Vue.js动画中，不会删除v-enter

让我们以一个例子来理解动画的概念，并查看动画在应用程序中的工作方式。

示例

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>
    </head>
    <body>
    <style>
         .shiftx-enter-active {
            animation: shift-in 2s;
         }
         .shiftx-leave-active {
            animation: shift-in 2s reverse;
         }
         @keyframes shift-in {
            0% {transform:rotateX(0deg);}
            25% {transform:rotateX(90deg);}
            50% {transform:rotateX(120deg);}
            75% {transform:rotateX(180deg);}
            100% {transform:rotateX(360deg);}
         }
      </style>
      <div id = "databinding">
      <p> Click at the below button to see the animation effect.</p>
         <button v-on:click = "show = !show">Click Here</button>
         <transition name = "shiftx">
            <p v-show = "show">
               <img src = "https://www.flowerpower.com.au/media/catalog/product/image/287189f77f/love-you-rose.jpg" style = "width:100px;height:100px;" />
            </p>
         </transition>
      </div>
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js文件:

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

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

Index.css文件:

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

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

输出:

当您单击"单击此处"按钮时，您可以看到动画效果。图像将从0旋转到360度，最后消失。请参见以下图像:

另一个屏幕截图:

示例说明

在上面的示例中，您可以看到我们使用了与过渡效果相同的类。在这里，我们将图像封装在p标签中，如下所示:

在这里，转换的名称为 shiftx ，并且该类将用作以下CSS代码:

在上面的代码中，该类在过渡名称中定义，即 shiftx-enter-active和.shiftx-leave-active。

已定义了动画 关键帧的范围从0％到100％，其中每个关键帧的变换程度定义如下:

   @keyframes shift-in {
      0% {transform:rotateX(0deg);}
      25% {transform:rotateX(90deg);}
      50% {transform:rotateX(120deg);}
      75% {transform:rotateX(180deg);}
      100% {transform:rotateX(360deg);}
   }

自定义过渡类

Vue.js 可帮助您指定您可以通过提供以下属性来定制自己的自定义过渡类。这些属性可以添加到过渡元素中。

enter-class enter-active-class enter-to-class (added in version 2.1.8+) leave-class leave-active-class leave-to-class (added in version 2.1.8+)

自定义类通常在我们想要使用外部CSS库(例如animate.css)时使用。

让我们举一个例子来了解自定义过渡类的概念并了解它们如何

示例

Index.html文件:

<html>
   <head>
      <title>Vue.js Animation</title>
      <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 type = "text/javascript" src = "js/vue.js"></script>
    </head>
    <body>
     <div id = "animation" style = "text-align:center">
         <button @click = "show = !show"><span style = "font-size:25px;">Click Here</span></button>
         <transition
            name = "custom-classes-transition"
            enter-active-class = "animated swing"
            leave-active-class = "animated bounceIn">
            <p v-if = "show"><span style = "font-size:25px;">See the animation effect</span></p>
         </transition>
      </div>
      </script>
      <script src="index.js"></script>
   </body>
</html>

Index.js文件:

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

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

输出: