5 Things You No Longer Need JavaScript to Do
If you focus on JS for too long, you will develop the habit of using JS to implement any function, and forget that HTML and CSS also have certain functional characteristics. In fact, it is thankless to implement some functions with JS. We need to comprehensively use technical tools instead of relying solely on JS.
5 things you don’t need Javascript for This article starts with 5 examples to tell us which functions do not necessarily have to be done with JS.
Overview
Use css to control svg animation
The original article draws an example of setting off fireworks, which essentially uses CSS to control SVG to produce animation effects. The core code:
.trail {
stroke-width: 2;
stroke-dasharray: 1 10 5 10 10 5 30 150;
animation-name: trail;
animation-timing-function: ease-out;
}
@keyframes trail {
from,
20% {
stroke-width: 3;
stroke-dashoffset: 80;
}
100%,
to {
stroke-width: 0.5;
stroke-dashoffset: -150;
}
}It can be seen that the main use is to stroke-dasharray control the style of the solid and dashed lines, and then use animation effects to stroke-dashoffset produce changes, so as to realize the displacement of the starting point of the line and achieve the effect of line "drawing", and this css style is effective for the path drawn by svg .
sidebar
The sidebar that appears only when hover can be implemented completely using css:
nav {
position: 'absolute';
right: 100%;
transition: 0.2s transform;
}
nav:hover,
nav:focus-within {
transform: translateX(100%);
}The core is hover that setting transform the attribute when can offset the element, and translateX(100%) can displace the position of the current element width.
Another interesting thing is that if you use the TABS button to focus on the elements in the sidebar, you also want the sidebar to come out. This can be :focus-within achieved directly using . If you need to delay the display after hover, you can use transition-delay the attribute.