The author | Julie edit | jing Lou
Li Meng, graduated in 2016, is a Web front-end developer. Currently, she is working in Tencent. She likes Node. js, vue.js and other technologies, and loves new technologies and programming.
Vue. Js documentation for the use of animation do a lot of introduction, unfamiliar partners can first understand.
Here we go!
First animation example:
This is actually a very common pop-up layer effect, click the mouse button to switch the pop-up layer display, click other areas pop-up layer disappear, with javascript binding events may be a few lines of code, but vue.js state-driven mode and javascript event-driven mode is different. Here’s how it works with vue.js:
Click on the button to switch to a Boolean value show, and use show to control the display of the pop-up layer. The pop-up layer wrapped in the
The CSS declarations corresponding to different transition states are explained on the official website as follows:
V-enter: defines the start state of the transition. It takes effect when the element is inserted and is removed in the next frame.
V-enter -active: defines the end state of the transition. It works when the element is inserted and is removed after the transition/animation completes.
V-leave: Defines the start state of the exit transition. When the exit transition is triggered, it is removed in the next frame.
V-leave-active: defines the end state of the exit transition. It works when the exit transition is triggered and is removed after the transition/animation completes.
Vue. Js animation is a completely new experience compared to jQuery.
So how do you click on other areas to make the pop-up layer disappear?
The first thing that comes to mind is to prevent button and pop-up layer events from bubbling up directly, and then bind document events to make the pop-up layer disappear. Obviously this method is too simple and crude, and the scenarios used are also very demanding, requiring only one pop-up layer effect on the page, although it is not recommended, but also provides a way of thinking.
If the target is not a button and eject layer, you can make the eject layer disappear. If the target is not a button and eject layer, you can make the eject layer disappear. Using ref to specify an index ID for the child component, you can access the child component directly in JavaScript. Here is the implementation:
Here we define a lifecycle hook, mouted, that fires after the vue instance is bound to the node, checks whether the document binding event is a button and pop-up layer, returns if it is, and otherwise sets show to false.
After writing this, I also went to the Internet to find out if there is a better idea to achieve, and then read the source code of Element part of the famous VUe.js framework, and found that it is also the idea to achieve. We have a good implementation ideas welcome to exchange ha!
Second animation example:
The second example is about TAB switching. Let’s look at the effect:
This is also a very common interaction effect. In the past, the normal javascript writing method is to bind events to each button to switch between different layers. Of course, you can also use pure CSS writing, add a radio button sibling node to each of the three switching layers, and then use absolute positioning to position the radio button on the three buttons. So I can use the: Checked pseudo-class to select the sibling element of the radio button, which corresponds to the different layers. I just wrote a simple DOM structure, which looks something like this:
Vue-router is a routing component of vue.js, which is very popular in single-page applications. If the data volume of switching layer is very large, for example, each layer needs to have a large number of servers for data interaction. Vue-router is highly recommended because vue-Router automatically destroys the preceding components during each route switch so that the page is not blocked during frequent operations. Vue-router also defines transition animations during the page switch.
If the amount of data is not complex, you can switch between different layers directly by defining the switch state in vue.js.
Template and CSS:
Introduce, chatbar and Videobar respectively represent three components that need to switch with button. Then, events can be bound to vue.js button node to control click state:
Clicking on different buttons will change the active state, and this state will be applied to the button, such as highlighting the clicked button.
So how do you apply the active state to the pop-up layer? Instead, define a computed function:
And you’re done!
Ok, that’s it, the first time to send such a long article, the code posted may not be comprehensive, if there are deficiencies, welcome you gods advice, give a thumbs-up bar la la la!
Related to recommend
Vue. Js 2.0 source code parsing before the end of the rendering Three. Js Camera preliminary exploration — transition animation implementation