11). VUE.JS - Animation and Transition

By -
VueJS provides various ways to apply transition to the HTML elements when they are added/updated in the DOM.

 Using Transition tag we do animation in our application. Here example of Transition.

There are various list of classes are available in VueJs.

  1. v-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
  2. v-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes.
  3. v-enter-to: Ending state for enter. Added one frame after element is inserted (at the same time v-enter is removed), removed when transition/animation finishes.
  4. v-leave: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
  5. v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes.
  6. v-leave-to:  Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave is removed), removed when the transition/animation finishes.

Custom Transition Classes

You can also specify custom transition classes by providing the following attributes:
  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)
There are few Examples here...  Example 1 Example 2

Explicit Transition Durations

We can also specify separate values for enter and leave durations:

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

List Move Transition
The <transition-group> component has another trick up its sleeve. It can not only animate entering and leaving, but also changes in position. The only new concept you need to know to use this feature is the addition of the v-move class.

Here is example of Transition Group

Comments

Post a Comment

Popular posts from this blog

Angular 4 interview questions and answers for experience

By -
Angular.io is official good resource to lean Angular. And For Angular 2-4 you can used this one of best i have see  here https://www.tutorialspoint.com/angularjs/ is a good platform for learning the basics of AngularJS. You can download the pdf file for every tutorials that are available in it. What is AngularJS 2/4? - Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop -created by google development team. What is the difference between Angular 1(AngularJS) and Angular 2/4? -Angular 2/4 is complete re-created of Angular 1.In other word,it was completely rewritten from the ground-up. -Angular 1(AngularJS) is controller and $scope based and Angular 2/4 is based on an architecture of component hiera...
Read more

8). Vue.js Methods and Event Handling

By -
We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. Example 1:- JS fiddle <div id="vue-instance">       Enter your name: <input type="text" v-model="name">      <button v-on:click="sayHello">Hey there!</button> </div> var vm = new Vue({        el: '#vue-instance',        data: {             name: ''        },   methods: {            sayHello: function(){             alert('Hey there, ' + this.name);           }        } }); Example 2:-  Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable: <button v-on:click="warn('Form can...
Read more

12). Vue JS - Slots

By -
<slot> basically use for element to serve as distribution outlets for content. To allow a parent component to pass DOM elements into a child component, provide a <slot></slot> element inside the child component. You can then populate the elements in that slot. Slots basically used for creating Generic components (button, Card, Modal), layout (App, Header, Footer), Recursive component (Tree, Menu).   For Example JS Fiddler Here We have create one component app-child. And we add slot tag and fixed content which always display. But slot content is dynamically what we give it will display. <div id="app">   <h2>We can use slots to populate content</h2>   <app-child>     <h3>This is slot number one</h3>   </app-child>   <app-child>     <h3>This is slot number two</h3>     <small>I can put more info in, too!</small> ...
Read more