Use CSS3 instead of JS for interaction, and use CSS3 instead of JS for Interaction

Use CSS3 instead of JS for interaction, and use CSS3 instead of JS for Interaction

[CSS3 and JS]

Anyone who knows about CSS knows that the implementation of CSS is the lowest level, and the implementation method and performance are not the same. JS provides similar scripts for interfaces; from the perspective of comparison between CSS3 animation and JS animation, the two will be clearer. with the use of the front-end framework, page animation will be increasingly applied to CSS3.

[Other usage of CSS3]

In addition to the replacement of animation, there is also the implementation of various interactions, also reflects the strong CSS, more is to use the selector provided by CSS3;

Let's take a look at an example: it can better reflect my deep understanding of CSS.

<Style> body {background: # f4f4f4; margin: 0;}/* list */. list _ con {}. list _ con. box {background: # fff; position: relative; border-bottom: solid 1px #858585; overflow: hidden ;}. list _ con. box: hover {background: # f4f4f4;-webkit-transition: all. 6 s; transition: all. 6 s ;}. list _ con. box: hover. delete {-webkit-transition: all. 6 s; transition: all. 6 s; opacity: 1 ;}. list _ con. input {-webkit-appearance: none; position: absolute; top: 10px; left: 12px; padding: 0; border: none; margin: 0; width: 24px; height: 24px; border: solid 2px red; border-radius: 50%; box-sizing: border-box; outline: none; cursor: pointer ;}. list _ con. input: checked: after {content: ''; width: 14px; height: 14px; background: red; position: absolute; top: 3px; left: 3px; border-radius: 50% ;}. list _ con label {line-height: 24px; padding: 10px 0 10px 48px; display: block;-webkit-transition: all. 4 s; transition: all. 4 s ;}. list _ con. input: checked + label {color: # d9d9d9; text-decoration: line-through ;}. list _ con. delete {width: 44px; height: 44px; float: right; position: relative; cursor: pointer; opacity: 0 ;}. list _ con. delete: hover: after {-webkit-transform: rotate (225deg); transform: rotate (225deg );}. list _ con. delete: hover: before {-webkit-transform: rotate (225deg); transform: rotate (225deg );}. list _ con. delete: after {content: ''; position: absolute; width: 2px; height: 20px; background: red; top: 12px; left: 50%; margin-left: -1px;-webkit-transform: rotate (45deg); transform: rotate (45deg); border-radius: 4px;-webkit-transition: all. 6 s; transition: all. 6 s ;}. list _ con. delete: before {content: ''; position: absolute; width: 20px; height: 2px; background: red; top: 50%; left: 12px; margin-top: -1px;-webkit-transform: rotate (45deg); transform: rotate (45deg); border-radius: 4px;-webkit-transition: all. 6 s; transition: all. 6 s ;} </style> <div class = "list _ con"> <div class = "box"> <div class = "delete"> </div> <input class =" input "type =" checkbox "/> <label> Local garbage collection fee </label> </div>

[Description]

There are many interactions, hover interaction, and checked interaction;

I believe that many people have already implemented the above implementation methods. Here I will talk about my understanding of this and my vision for technology. I have been working for nearly four years now, in these years, the growth speed is self-known, but the same point is that a lot of knowledge will be used, and you know how to use it. But this time, you can really understand what it means only knowing what it means, not knowing what it means, why!

Previously, I used css and js to achieve the Interaction Effect. During this period, I tried to use css to achieve interaction, however, it is only now that the original idea has been truly realized due to the unblocking of self-defense during the exploration;

The full implementation of CSS improves reusability and maintainability, provides a better implementation method for implementing the corresponding components, and also improves the performance;

.list__con .input:checked+label

 

For example, in the above usage, we can use a variety of powerful selectors added by CSS3 to achieve more and better interaction effects. From then on, we will use JS to change the DOM tragedy, and more will tend to CSS.

[Vision] I believe that CSS will be more powerful, and CSS will be used for interaction. JS is more about regression to the ontology. Recently, I started to study Vuejs, I learned about the various advantages brought by technological advances. This experience is also in the project. It not only improves the use of Vue, but also improves my views on CSS3 selector, I have always thought that the CSS3 selector is cute, and many methods cannot be used at all. Now I know that we should know the true meaning of technology.