A, start

Recently, I finished my work and went through the vUE official document again. I found that I rarely used the vUE animation artifact, JavaScript hook function

During the weekend, I made a few demos to share with you, first the picture aboveTips: The knowledge points to be understood in this paper are as follows:

  • CSS transition
  • CSS animation property animation
  • Vue animation introduction
  • List of vue animations

The introduction of the official document is very detailed, I will not do redundant redundant, here through practice briefly said vue animation hook function ideas and my use experience

Second, the practice

The following animation implementation is only a personal understanding, not a standard, I hope the big guy to guide

1. Follow the list

Click here for the source code

The follow up list appears from the bottom and goes back to the original position. I used the padding-top for 100% in the initial phase and 0% in the end phase to implement this animation.

@keyframes one-in {
    from {
        padding-top: 100px;
        height: 0%;
    }
    to {
        padding-top: 0px;
        height: 100%; }}Copy the code

2. Paragraph list

Click here for the source code

The paragraph list appears from the right and goes back to its normal position. I animate this using padding-left at 100% at the beginning and 0% at the end.

@keyframes one-in {
    from {
        padding-left: 100%;
    }
    to {
        padding-left: 0%; }}Copy the code

3. Interleaved lists

Click here for the source code

An interlaced list is a little more complicated, but we can break it down into two animations.From the bottom left, the height will change from zero to 100px.

@keyframes one-in {
    from {
        padding-right: 100%;
        padding-top: 100px;
        height: 0;
    }
    to {
        padding-right: 0%;
        padding-top: 0px;
        height: 100px; }}Copy the code

From the top right, the height will change from zero to 100px (set by yourself)

@keyframes one-in {
    from {
        padding-left: 100%;
        height: 0;
    }
    to {
        padding-left: 0%;
        height: 100px; }}Copy the code

Then select different animations for odd or even numbers depending on the index of the list rendering

methods: {
    beforeEnter (el) {
        el.style.opacity = 0
    },
    enter (el, done) {
        let delay = el.dataset.index * 100
        let animation = el.dataset.index % 2= = =0
            ? 'one - in 0.4 s infinite'
            : 'two - in 0.4 s infinite'
        setTimeout(() = >{
            el.style.transition = 'opacity 0.4s '
            el.style.opacity = 1
            el.style.animation = animation
            el.style['animation-iteration-count'] = 1
            done()
        }, delay)
    }
}
Copy the code

4. More ideas

Practice to this, more and more feel that the page animation is not good-looking, not our ability is poor, but our imagination is not enough

Flip the listClick here for the source code Every complex animation is actually a lot of simple small animation Mosaic, so the next time the designer brings the imaginative animation design draft, do not take the kitchen knife, careful analysis of the components of the animation, it may not be so difficult.

Three, ideas,

1. Understanding of ideas

The idea is that Vue detects the insertion and removal of all child nodes in the transition component that it encapsulates, and in turn throws hook functions at each stage of these properties and accepts animations from either our front-end ER custom or from a third-party library

In this case, insert refers to before the animation starts, before the animation starts, and before the animation ends, that is, the corresponding hook functions beforeEntry, Entry, and entryTo

Therefore, the principle of VUE animation is to split a complete animation in each coding stage, and then recombine it into a complete animation in the compilation stage, which is also the meaning of the figure on the official website

2. Practice experience

2.1 Minimize the use of excessive attributes for complex animations

The transition property requires you to put the transition states in different hook functions. Complex animation code is too much to write clean. of course, if you have to do this, you are advised to add or remove classes

2.2 Use animation properties

The nice thing about animation properties is that you can reuse custom animations, and you only need to specify the animation name

Use the setTiemout function to set the animation delay for different DOM in sequence

It is very difficult to set different animation delays for different DOM, but it is very convenient to set the start time for the DOM.

Tips to change your interactive animations from “ok” to “Awesome”