CSS3 element appears animation instance

Time:2019-10-9

There are two ways to realize animation in css3. One istransitionTransition, one isanimationAnimation. The main difference is thattransitionRequire conditional triggering, usually withhoverTo trigger, andanimationIt is more flexible and can be played automatically or triggered by conditions.

So how to animate an element?

If it istransitionThis effect can be easily achieved, for example

.box{
  visibility:hidden;
  opacity:0;
  transform:translateY(100px);
  transition:.3s;
}
.show{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}

In this way, a “bottom-up, transparency from 0 to 1” animation is realized, which is often used, isn’t it?

https://codepen.io/xboxyan/pe…

Of course, we can also use it.animationTo achieve,

.box{
  visibility:hidden;
  opacity:0;
  transform:translateY(100px);
  transition:.3s;
}
.show{
  animation:show .5s forwards;
}

.hide{
  visibility:visible;
  opacity: 1;
  transform: translateY(0);
  animation:hide .5s forwards;
}
@keyframes show{
  to {
    visibility:visible;
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes hide{
  to {
    visibility:hidden;
    opacity: 0;
    transform: translateY(100px)
  }
}

My God, I have to write so much to achieve the same effect as above. There is no way. The appearance and disappearance are two different groups of animation, so we need to define two animations.

https://codepen.io/xboxyan/pe…

Element animation

The two methods of animation implementation are briefly introduced above. Strictly speaking,transitionIt’s just a transition, just animation in the process of switching styles, andanimationIt’s really animation. Of course, they also need to choose according to their actual needs.

Let’s look at this requirement:

Typically, a message prompt is displayed globally on a page, similar totoastEffect. This is my usual practice.

function showMessage(txt){
    this.timer && clearTimeout(this.timer);
    var oDiv = document.getElementById('messageInfo');
    if(!oDiv){
      oDiv = document.createElement('div');
      oDiv.className = 'messageInfo';
      oDiv.id = 'messageInfo';
      document.body.appendChild(oDiv);
    }
    oDiv.innerHTML = '<span>'+txt+'</span>';
    oDiv.classList.add('show');
    this.timer = setTimeout(function(){
      oDiv.classList.remove('show');
    },2000)
}

The idea is to add a pagediv#messageInfoContainer, and then add the class name.showLet elements appear and automatically remove after 2S.showImplement hiding, the effect is as follows

https://codepen.io/xboxyan/pe…

It is obvious that one effect is that there is no animation when it first appears, and then it will be normal. Maybe in ordinary projects, this little flaw has no effect, after all, a large number of people do not even give animation ah, directly isdisplay:noneanddisplay:blockIt can be said that there is no experience.

So why does this happen?

First of all, understand a little.transitionIt’s not triggered automatically. It’s achieved by adding and removing class names. But when the first element was just created, the element was not loaded on the page at this time. At this time, adding the class name immediately can be equated with creating it together, without forming a transitional effect. The solution to this problem is simple, just a little delay.

//...
setTimeout(function(){
   oDiv.classList.add('show');
},50)
//...

This basically solves the problem, as follows

https://codepen.io/xboxyan/pe…

However, in theory, the smaller the delay, the better. I tested it, probably related to the browser’s performance. The purpose of using the timer is only to wait for the elements to load, and DOM does not monitor the loading completion event natively, so it can only estimate a rough value with the timer.

However, this is still a flaw, which is intolerable in terms of code structure. So, is there a better way? The answer isanimation

Animation

Although from the beginning of the example,animationIts writing is stinky and long, but it also shows its powerful function, one of which is to play animation automatically.

So, put the above one.toastRevamp it and use it.animationRealization

.messageInfo{ 
    /**...**/
    animation:show .5s forwards;
}
.hide{
  visibility:visible;
  opacity: 1;
  transform: translateY(0);
  animation:hide .5s forwards;
}
@keyframes show{
  to {
    visibility:visible;
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes hide{
  to {
    visibility:hidden;
    opacity: 0;
    transform: translateY(-100%)
  }
}

JS is basically the same as before

function showMessage(txt){
    this.timer && clearTimeout(this.timer);
    var oDiv = document.getElementById('messageInfo');
    if(!oDiv){
      oDiv = document.createElement('div');
      oDiv.className = 'messageInfo';
      oDiv.id = 'messageInfo';
      document.body.appendChild(oDiv);
    }
    oDiv.innerHTML = '<span>'+txt+'</span>';
    ODiv. classList. remove ('hide'); // The default is display
    this.timer = 
      setTimeout(function(){
      ODiv. classList. add ('hide'); hide after //2s
    },2000)
}

The effect is as follows

https://codepen.io/xboxyan/pe…

It can be said to be quite perfect.

Other application scenarios

Element Add Animation

Usually when you add a form or upload a picture, if you need to animate the newly added elements, you can use theanimation

https://codepen.io/xboxyan/pe…

Of course, you can also load animations by paging, and you need to add a delay to each element.animation-delaythat will do

/*animation-delay*/
.list li:not(.hide):nth-child(5n + 1) {
    animation-delay: .3s;
}
.list li:not(.hide):nth-child(5n + 2) {
    animation-delay: .6s;
}
.list li:not(.hide):nth-child(5n + 3) {
    animation-delay: .9s;
}
.list li:not(.hide):nth-child(5n + 4) {
    animation-delay: 1.2s;
}
.list li:not(.hide):nth-child(5n + 5) {
    animation-delay: 1.5s;
}

The effect is as follows, elements will appear in turn, the preview window is relatively small, it is recommended to view in the original link.

https://codepen.io/xboxyan/pe…

Then, nine-pane animation can be implemented, allowing elements to diffuse from the upper left to the lower right when they appear, which is also used.animation-delay

https://codepen.io/xboxyan/pe…

It’s cool, isn’t it? It doesn’t need to use js or other frameworks. It’s natural. The browser experience is even better. The browser you don’t support is harmless and elegant.

Section

On the whole,animationFar more thantransitionIt’s much more powerful, and of course it’s also scenario-based in actual use (for example, the example at the beginning of the article is obvious).transitionBetter) If there is interaction, such as mouse-in, first looktransitionWhether it can be achieved or not, the second isanimationIf an element like this appears (generates) animation, then it needs to be usedanimationYes.