In this not rich New Year’s breath, update the second weekly front end animation series.

Today, there are fewer people on the subway. Everyone smiles at each other, nods but stares at each other. For they knew that only the best men of the Republic, the most important posts in every department, would be in this carriage at this time. The man with the suitcase bowed his head in shame, but no one blamed them. After all, everyone’s ability is limited. Instead of letting them continue working, it would be better to let them go home for the Spring Festival.

This article analyzes some of the effects of implementation, just as an idea to share, just as learning material to use.

Source animation

Combined with the display of the team logo in the previous article, a bar is placed below it to show the approval rating of the team. This shows that you can click on the bar to increase your support for your team. The effect is shown as follows:

Implementation analysis

After observation, it can be found that:

  • The animation is symmetrical on both sides
  • The change of support rate when clicking is the change of width. The width occupied by the two sides is set in proportion (support number/total number). When clicking, the support number and total number of the team change at the same time
  • Where the red and blue join is an bevel, which is where the implementation comes inborder-widthA technique of
  • Click “+1” and the effect is an enlarged animation

How about we analyze all of this, and if we have an idea, let’s look at the code.

Code implementation

Width change effect

Note that when you click, you need to add 1 to the number of support and the total number of support, and then modify the width of support according to this number.

one.width(oneValue / allVote * 100 + "%");
other.width(100 - oneValue / allVote * 100 + "%");
Copy the code

Realization of inclination Angle

We usually use -webkit-transform:rotate(xxdeg) to rotate, but this method is not very convenient when setting two different colors. It says that we can use the border-width technique to achieve this Angle. When we set the width and height of an element to 0, the border-width property will be occupied, and the value of this property will be bisected. If the left and right blocks are repeated, the effect can be shown as follows:

The setup code is as follows

.team-vs-bar .bar-a:after, .team-vs-bar .bar-b:after {
    position: absolute;
    display: block;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 20px;
    border-color: transparent;
    -webkit-transform: rotate(-15deg)
}

.team-vs-bar .bar-a:after {
    border-top-color: #c93c5d;
    right: -20px;
    top: 0;
    z-index: 1
}

.team-vs-bar .bar-b:after {
    border-bottom-color: #306dca;
    left: -20px;
    bottom: 0
}
Copy the code

Realization of “+1” dynamic effect

Continue to use keyframes, you can do the following Settings, note that each click needs to remove the unfinished animation, only the last display.

@-webkit-keyframes bar_plus { 0% { opacity: 0; -webkit-transform: scale(0) } 50% { opacity: 1 } 60% { opacity: 1 } 100% { opacity: 0; - its - transform: scale (1.4)}}Copy the code

Results show

Key points interpretation

In addition to “+1” dynamic effect, the key point of this paper is the realization of inclination Angle. The “+1” dynamic effect can still be implemented using keyframes, while the oblique Angle can be implemented using the after pseudo-class and the border-width method. Code has been uploaded to Github, welcome to issue.

Last rule, post my blog, welcome to follow