CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

31 December, 2020

Vue.js Animation

 Programing Coderfunda     December 31, 2020     Vue.js Tutorial     No comments   

Vue.js Animation

In Vue.js applications, we can apply animations in the same way as we applied transition in earlier examples. Animation also has classes that you have to declare to get the animation effect.

The only difference between Vue.js transition and Vue.js animation is that in Vue.js animation, the v-enter is not removed immediately after the element is inserted, but on an animation end event.

Let's take an example to understand the concept of animation and see how the animation works in an application.

Example

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Animation</title>  
  4.       <link rel="stylesheet" href="index.css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.     </head>  
  7.     <body>  
  8.     <style>  
  9.          .shiftx-enter-active {  
  10.             animation: shift-in 2s;  
  11.          }  
  12.          .shiftx-leave-active {  
  13.             animation: shift-in 2s reverse;  
  14.          }  
  15.          @keyframes shift-in {  
  16.             0%   {transform:rotateX(0deg);}  
  17.             25%  {transform:rotateX(90deg);}  
  18.             50%  {transform:rotateX(120deg);}  
  19.             75%  {transform:rotateX(180deg);}  
  20.             100% {transform:rotateX(360deg);}  
  21.          }  
  22.       </style>  
  23.       <div id = "databinding">  
  24.       <p> Click at the below button to see the animation effect.</p>  
  25.          <button v-on:click = "show = !show">Click Here</button>  
  26.          <transition name = "shiftx">  
  27.             <p v-show = "show">  
  28.                <img src = "https://www.flowerpower.com.au/media/catalog/product/image/287189f77f/love-you-rose.jpg" style = "width:100px;height:100px;" />  
  29.             </p>  
  30.          </transition>  
  31.       </div>  
  32.       </script>  
  33.       <script src="index.js"></script>  
  34.    </body>  
  35. </html>  

Index.js file:

  1. var vm = new Vue({  
  2.             el: '#databinding',  
  3.             data: {  
  4.                show:true  
  5.             },  
  6.             methods : {  
  7.             }  
  8.          })  

Let's use a simple CSS file to make the output more attractive.

Index.css file:

  1. html, body {  
  2.     margin: 5px;  
  3.     padding: 0;  
  4. }  

After the execution of the program, you will see the following output


Example Explanation

In the above example, you can see that we have used classes same as transition effect. Here, we have enclosed an image in p tag as following:

  1. <transition name = "shiftx">  
  2.             <p v-show = "show">  
  3.                <img src = "https://www.flowerpower.com.au/media/catalog/product/image/287189f77f/love-you-rose.jpg" style = "width:100px;height:100px;" />  
  4.             </p>  
  5.          </transition>  

Here, the name of the transition is shiftx and the class is applied as the following CSS code:

  1. <style>  
  2.    .shiftx-enter-active {  
  3.       animation: shift-in 2s;  
  4.    }  
  5.    .shiftx-leave-active {  
  6.       animation: shift-in 2s reverse;  
  7.    }  
  8.    @keyframes shift-in {  
  9.       0%   {transform:rotateX(0deg);}  
  10.       25%  {transform:rotateX(90deg);}  
  11.       50%  {transform:rotateX(120deg);}  
  12.       75%  {transform:rotateX(180deg);}  
  13.       100% {transform:rotateX(360deg);}  
  14.    }  
  15. </style>   

In the above code, the class is defined within the transition name, i.e. shiftx-enter-active and .shiftx-leave-active.

The animation is defined with the keyframes from 0% to 100% where transform is defined at each of the keyframes in degree as following:

  1. @keyframes shift-in {  
  2.    0%   {transform:rotateX(0deg);}  
  3.    25%  {transform:rotateX(90deg);}  
  4.    50%  {transform:rotateX(120deg);}  
  5.    75%  {transform:rotateX(180deg);}  
  6.    100% {transform:rotateX(360deg);}  
  7. }  

Custom Transition Classes

Vue.js facilitates you to specify your own custom transition classes by providing the following attributes. These attributes can be added to the transition element.

  • 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+)

Custom classes are generally used when we want to use an external CSS library such as animate.css.

Let's take an example to understand the concept of custom transition classes and see how they work in an application.

Example

Index.html file:

  1. <html>  
  2.    <head>  
  3.       <title>Vue.js Animation</title>  
  4.       <link href = "https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel = "stylesheet" type = "text/css">  
  5.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
  6.       <script type = "text/javascript" src = "js/vue.js"></script>  
  7.     </head>  
  8.     <body>  
  9.      <div id = "animation" style = "text-align:center">  
  10.          <button @click = "show = !show"><span style = "font-size:25px;">Click Here</span></button>  
  11.          <transition  
  12.             name = "custom-classes-transition"  
  13.             enter-active-class = "animated swing"  
  14.             leave-active-class = "animated bounceIn">  
  15.             <p v-if = "show"><span style = "font-size:25px;">See the animation effect</span></p>  
  16.          </transition>  
  17.       </div>  
  18.       </script>  
  19.       <script src="index.js"></script>  
  20.    </body>  
  21. </html>  

Index.js file:

  1. var vm =  new Vue({  
  2.             el: '#animation',  
  3.             data: {  
  4.                show: true  
  5.             }  
  6.          })  

After the execution of the program, you will see the following output:


When you click on the "Click Here" button, you can see two types of animations. The first animation is applied to the above example is:

  1. enter-active-class = "animated swing"   
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Sitaare Zameen Par Full Movie Review
     Here’s a  complete Vue.js tutorial for beginners to master level , structured in a progressive and simple way. It covers all essential topi...
  • AI foot tracking model
    I am a student doing a graduation project. I urgently need to deal with this model (I am attaching a link). I've never worked with pytho...
  • Laravel Search String
      Laravel Search String is a package by   Loris Leiva   that generates database queries based on one unique string using a simple and custom...
  • Writing and debugging Eloquent queries with Tinkerwell
    In this article, let's look into the options that you can use with Tinkerwell to write and debug Eloquent queries easier. The post Wr...
  • Laravel - Installation
    For managing dependencies, Laravel uses   composer . Make sure you have a Composer installed on your system before you install Laravel. In t...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda