CSS3’s Transform and Transition make it easy for developers to animate transitions, but that doesn’t mean anyone can make a smooth, clean animation.

In this article, I will try to add some animation effects to the Fantastic-admin background frame and share my design ideas.

This article is the author’s subjective view, have different views welcome friendly discussion.

The preparatory work

First of all, dynamic effect belongs to the design of the work, for development, is not good at, including me. So what to do? One way is to consult Design masters, but there are few such opportunities. My solution is to refer to some Design specifications from big manufacturers, and what I refer to this time is the Material Design several years ago.

Then we refer to similar products to see where they add motion effects, and feel whether the motion effects are reasonable from the user’s point of view, and whether it will destroy the user’s operation experience.

Finally, after a brief reading of Material Design, I generally understand that long animation on the mobile end is about 300ms to 400ms, short animation is about 150ms to 200ms, and desktop animation is about 150ms to 200ms. As you can see, none of the animations will take more than 400ms, and most of the Settings will be kept under 300ms, because too long animations will make people feel dull, and too short animations will make people feel hard to understand.

Therefore, I finally determined the overall idea is to try to avoid the sudden appearance or disappearance of elements in the page, that is to say, dynamic loading and dynamic deletion of elements as far as possible through the dynamic effect of slow in and slow out, and then the fixed elements on the page if the need to shift or change the size of operations, must use the dynamic effect for transition. The animation execution time is kept between 150ms and 300ms, because some large areas of animation are too short to be animated with 200ms.

The next is the transformation in turn.

Suck the top

This is a very common scenario, using position: Fixed; The module fixed on the top will not move with the page scrolling, because it is fixed on the top of the content area, so box-shadow is used to simulate the floating effect, and then js is used to dynamically calculate the distance of the page scrollTop, so as to dynamically increase the shadow effect.

Part code:

.breadcrumb-container {
    transition: box-shadow 0.2 s;
    box-shadow: 0 10px 10px -10px #ccc;
}
Copy the code

Breadcrumb navigation

Breadcrumb navigation is used to show the hierarchy of the current page, so when the route switches, the breadcrumb navigation changes. Instead of using fade in and out, I made a shift effect from the right side, along with the slant of the text, to convey the meaning of “enter the page” to the user.

You’ll notice that there’s no moving out of the animation, just moving in. Because when the user action vision is to follow the mouse, and the change of the breadcrumb navigation is usually in click on the sidebar navigation route switch will change, the user is not too will notice the breadcrumb navigation, plus itself and is a short animation, to control the execution time, a a into seem a bit slow, so I remove the out of animation, Of course the end result is acceptable.

Part code:

.breadcrumb-enter-active {
    transition: all 0.2 s;
}
.breadcrumb-enter..breadcrumb-leave-active {
    opacity: 0;
    transform: translateX(30px) skewX(-50deg);
}
Copy the code

TAB bar

The TAB bar is a reference to the Chrome browser interface, and the new and closed animation from the original horizontal expansion form, changed to the form of up and down.

One might say, why is there a moving animation here? In fact, it is still the idea mentioned above. When the user operates, the vision follows the mouse, while the operation on the TAB bar is relatively frequent, because it will switch between multiple TAB pages, so this move out of the animation is indispensable. It also avoids overlapping of the tag elements as they perform their animations.

Part code:

.tab-animate {
    display: inline-block;
    transition: transform 0.2 s ease, opacity 0.2 s ease;
}
.tabbar-enter..tabbar-leave-to {
    opacity: 0;
    transform: translateY(30px);
}
.tabbar-leave-active {
    position: absolute;
}
Copy the code

The theme

We use the Menu component in ElementUI, which has the transition setting and the duration is 300ms. Therefore, for the sake of uniformity, I adjust the animation duration of navigation to 300ms, so that when switching the theme, The transition effect will appear to be more holistic, otherwise the situation will appear like this:

The navigation bar

The difficulty with navigation folding is the same as above, namely the animation execution time, which is consistent with ElementUI’s Menu component.

Content area

Content area is also the business page. Transform is not used for transition, because considering that elements in content area are uncontrollable, and transform will result in position: fixed; Location failure.

Set the mode of the
component to mode=” out-of-in “, because if you don’t set the mode of the
component to mode=” out-of-in “, then the animation will be one up and one down, until the top element is completely removed, and the bottom element is suddenly pushed up. Not ideal unless the incoming element is set to position: absolute; Overwrite it on top of the removed element, but there are too many uncontrollable factors out of the document.

Therefore, I use margin-left to process the dynamic effects of the final content area, and the mode is first out and then in. In order to avoid the total execution time of the two dynamic effects being too long, the moving out animation is 200ms, the entering animation is 150ms, and the total duration is controlled within 400ms. Since transform cannot be used, GPU acceleration cannot be carried out, and frames will occasionally drop if the time is too short.

Part code:

.main-enter-active {
    transition: all 0.2 s;
}
.main-leave-active {
    transition: all 0.15 s;
}
.main-enter {
    opacity: 0;
    margin-left: -20px;
}
.main-leave-to {
    opacity: 0;
    margin-left: 20px;
}
Copy the code

The last

So this is a demonstration of the whole thing.

Of course, if you’re interested, you can check out fantastic-Admin, a background framework I wrote based on Vue and ElementUI.

reference

  • Chinese version is here! The new edition of Material Design’s official motion guide
  • Chinese version is here! New Edition of Material Design Official Dynamic Effects Guide (2)
  • Chinese version is here! The new Material Design Official Dynamic Effect Guide (iii)