New in Vue: Transition Effects
- admin
Today I will continue to introduce you to a completely new feature of Vue, which is Transition Effects . It can be said that this is also one of the features of this framework.
Normally if you want to add effects (animate, delay, etc.) to actions on the DOM elements (for example, add items or remove) to make this action more professional, do for web applications to run more smoothly. What is the thing that every developer needs to do?
1. Using CSS with familiar animation attributes, web-kit-transaction:
1 2 3 4 5 6 | div { transition-property: width; transition-duration: 2s; transition-timing-function: linear; transition-delay: 1s; } |
and then add more items to create effects.
2. Use Jquery methods that support 1 animate number:
1 | $ (element) .show (). css (''). animate (options, 'linear', 'fast') |
The above are some ways that every dev has been using, and the above still have its own advantages, which will be more convenient for each user case.
However, instead of having to do the above steps, why don’t we integrate it into elements with such corresponding attributes.
That would be more convenient, and Vue implemented the Transition Effects feature based on those ideas.
Overview
As mentioned above, Vue provides us with the most convenient way to apply transition effects when existing conditions exist, such as adding, editing, and deleting items on the DOM. This feature includes:
+, Automatically apply CSS classes transition and effects .
+, Interacting with the 3rd-party CSS animate libraries (Animate.css, etc.)
+, Use javascript to manipulate the DOM during the transition.
+, Interact with the 3rd-party JS libraries (Velocity.js, etc …)
Very full of divine libs that people still use, which is great, and you can feel free to call and use without worrying about missing.
Let’s find out how to use it.
Very simply, we only need to add the following:
1 2 3 4 5 6 7 8 | <div id = "framgia-demo"> <button v-on: click = "show =! show"> Toggle </button> <transition name = "fade"> <p v-if = "show"> we make it awesome! </p> </transition> </div> |
1 2 3 4 5 6 | .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-active { opacity: 0 } |
1 2 3 4 5 6 | new Vue ({ el: '#demo', data: { show: true } }) |
You can test the example below:
The important point that I want to mention here is that we can detect transition states to be able to adjust as desired.
Vue provides us with a transition class wrapper component , which allows us to add transitions that convert into or move to any element on the DOM.
When an element is wrapped (wrapped) in a transition component that has been added or deleted, Vue will follow 1 follow as follows:
- Vue will automatically retrieve any elements on the DOM that contain CSS with transition or animation. And then will be added / deleted at the appropriate time.
- Provide JavaScript Hooks and they will be called back at the appropriate time. (If anyone doesn’t know JS hook yet, check here )
Transition Classes
Vue provides 4 classes for enter / leave transitions of an element.
1. v-enter : Start the entry state.CSS and JS hook of this class defined from the previous will be applied to the element before being inserted or removed on a frame.
2. v-enter-active : Activate and end the status. Apply to the element before being inserted, removed when the transition / animation is completed.
3. v-leave : Start the element’s departure state. Apply CSS and JS hooks when the leave transition event is triggered, removed after 1 frame.
4. v-leave-active : Activation and finish leave transition. Applied when the leave transitiion event is triggered, removed when the transition / animation is completed.
We have a small example of JS hooks used to combine the same CSS transition:
1 2 3 4 5 6 7 8 9 10 11 12 | <transition v-on: before-enter = "beforeEnter" v-on: enter = "enter" v-on: after-enter = "afterEnter" v-on: enter-cancelled = "enterCancelled" v-on: before-leave = "beforeLeave" v-on: leave = "leave" v-on: after-leave = "afterLeave" v-on: leave-cancelled = "leaveCancelled" > <! - ... -> </transition> |
in js file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | // ... methods: { // -------- // ENTERING // -------- beforeEnter: function (el) { // ... }, // the done callback is optional when // used in combination with CSS enter: function (el, done) { // ... done () }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // LEAVING // -------- beforeLeave: function (el) { // ... }, // the done callback is optional when // used in combination with CSS leave: function (el, done) { // ... done () }, afterLeave: function (el) { // ... }, // leaveCancelled only available with v-show leaveCancelled: function (el) { // ... } } |
==> We can fully define JS hooks for processing combined with CSS Transition classes to create the best effects for insert, remove events or any event that relates to the transition element, component on DOM.
1 transition example, this is the familiar game Lazy Sudoku (: D)
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id = "sudoku-demo" class = "demo"> <h1> Lazy Sudoku </h1> <p> Keep hitting the button shuffle until you win. </p> <button @ click = "shuffle"> Shuffle </button> <transition-group name = "cell" tag = "div" class = "container"> <div v-for = "cell in cells": key = "cell.id" class = "cell"> {{cell.number}} </div> </transition-group> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | new Vue ({ el: '# sudoku-demo', data: { cells: Array.apply (null, {length: 81}) .map (function (_, index) { return { id: index, number: index% 9 + 1 } }) }, methods: { shuffle: function () { this.cells = _.shuffle (this.cells) } } }) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .container { display: flex; flex-wrap: wrap; width: 238px; margin-top: 10px; } .cell { display: flex; justify-content: space-around; align-items: center; width: 25px; height: 25px; border: 1px solid #aaa; margin-right: -1px; margin-bottom: -1px; } .cell: nth-child (3n) { margin-right: 0; } .cell: nth-child (27n) { margin-bottom: 0; } .cell-move { transition: transform 1s; } |
DEMO here: Sudoku
In the above example, we have used the 3rd-party js as lodash, surely if anyone works a lot with js and wants to handle the array operation much, this libs will be used :), here the shuffle function will randomize arrays 1 randomly.
And also in the example there are initisze css classes and css transition classes to create animate for elements. And css transition + js hook Vue apply to transition-group . It’s easy to understand :).
Above is the basic knowledge I want to introduce to you about this new feature of Vue.1, a very good tool for creating effects, making our web application smoother and more professional. .
Hopefully the article will help you part in using effects for your application. See you in the following articles.:D