As a detailed front end person, I always need to do something about the page code I wrote. When I saw that the “like” button I wrote before was too monotonous, I simply added a small animation to it to enhance the user experience and cure my obsessive-compulsive disorder. Without further ado, no picture, no truth.
Of course, what you see is a simple version, but the functional requirements are all there, for example, click the careful heart to move the number plus one minus one, click the other button to control the number change, and the important number of the scroll change, in 9,99,999 add and subtract when the scroll process.
❤️ Love effect
The scale of transform is simply used. The animation is the Cubic bezier curve rate (.22,.93,.53, 1.25). Because I need to add an effect that is enlarged to the maximum and then reduced to its own size when I click, as shown below:
Then the animation will be what I want it to be.
Among them, the “like” and “unlike” ICONS are two different ones. I set both of them as location Settings, with the default state of opacity. Only when clicked, the desired icon will be displayed, and corresponding animation effects will be added to it.
Specific code CSS part:
.y-like .heart {
width: 18px;
height: 12px;
position: relative;
}
// Add click extension area
.y-like .heart::after {
content: ' ';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
}
.y-like .heart .fa {
position: absolute;
top: 0;
left: 0;
opacity: 0;
font-size: 14px;
transform: scale(0);
transition: all .3s cubic-bezier(22..93..53..1.25);
}
.y-like .heart .fa.active {
opacity: 1;
transform: scale(1);
}
.y-like .heart .fa.fa-heart.active {
color: red;
}
Copy the codeThe dom part:
<div class="heart">
<i class="fa fa-heart-o active"></i>
<i class="fa fa-heart"></i>
</div>
Copy the codeDigital scroll animation
At that time, I made the effect by using the number changes in the 0-9 column. By scrolling the text up and down, I added transform to locate the displayed number. The outer DOM would do overflow processing to prevent other numbers from being displayed, but I found that the effect was not the best after I made it out. From the perspective of visual perception, there is always something blocking the scrolling, which always feels very awkward. Therefore, I removed the influence of overflow in the outer layer, and used the positioning method. In terms of animation, KEYframes mode was used to add up or down fading effect to the numbers.
Take a look at the DOM layout for the numeric scroll section
<div class="count">
<div class="num">
<span class="upupin"></span>
<span class="upup"></span>
</div>
<div class="num">
<span class="upupin"></span>
<span class="upup"></span>
</div>
</div>
Copy the codeExplain why write so, come and we don’t know how much is a number digits, and may be singular or dual or 3 three digits, this is through digital resolution, in processing inside, in every number, I did it again the number or higher levels of digital, offset to the scroll can do digital, When the scroll starts, you calculate whether the number will scroll up or down, use the size of the number to compare the direction, and then add a specific class to the number in the innerHTML. Nonsense text said so much, or have to look at the picture:
This is a process of upward pushing. In fact, it is the function of the animation. When UPWARD, I add upupin upup, and the corresponding keyframes are a process from 0 -> -100% and from 100% ->0. And the same thing goes the other way, downin down. Because the height and width of the outer DOM of the number are fixed when setting the dom, the dom position height of the number can be written as 100% or -100%, which gives perfect scrolling and fading effect.
See the code:
@keyframes down {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes downin {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(100%);
}
}
@keyframes upup {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes upupin {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100%); }}Copy the codeThat’s pretty much the core of the problem, which is essentially scrolling up and down with the help of CSS animation offsets. The next point is how to handle the size of the number.
ToString () is used to process all incoming numbers, loop back through each number and add it to the DOM at once, compare the second and first numbers, and add different classes to the digits in different directions. The number of loops is the number of dom elements retrieved from.num. However, there are several critical points for processing. First, when the number is smaller than its own length, or larger than its own length, an empty number needs to be added to ensure normal rendering. Of course, remember to save the new numbers for the next update. Look at the code:
var len = 0
if (oldNum.length < newNum.length) {
oldNum.push(' ')
len = oldNum.length - 1
this.element.querySelector('.count').insertAdjacentHTML('beforeEnd'.'<div class="num"><span></span></div>')}else if (oldNum.length > newNum.length) {
newNum.push(' ')
len = newNum.length - 1
setTimeout(function () {
nums[nums.length - 1].remove()
}, 300)}else {
len = oldNum.length - 1
}
for (var i = len; i >= 0; i--) {
if(oldNum[i] ! == newNum[i]) {// Check whether scroll up or down by the numbers before and after
if (oldValue < newValue) {
h = '<span class="upupin">' + oldNum[i] + '</span>' +
'<span class="upup">' + newNum[i] + '</span>'
} else {
h = '<span class="down">' + newNum[i] + '</span>' +
'<span class="downin">' + oldNum[i] + '</span>'
}
this.element.querySelectorAll('.count .num')[i].innerHTML = h
}
}
// Save the new number after the end
this.value = newValueStr
Copy the codeThat’s pretty much it, plus a couple of built-in apis for adding and subtracting one and auto click to return the number after the click.
Here’s a preview of the Github address