You may not know the transition skills and details

In CSS, the transition attribute is used to specify the transition effect to be added to one or more CSS attributes.

The most common usage is to add A transition to an element so that when an attribute changes from state A to state B, it is no longer very direct and abrupt, but with A gap animation.

for instance:

<div></div>
Copy code
div {
    width: 140px;
    height: 64px;
    transition: .8s transform linear;
}
div:hover {
    transform: translate(120px, 0);
}
Copy code

Of course, in addition to the above basic usage, CSS transition has some very interesting details and interesting usage. Let me tell you one by one.

Not all attributes support transition

Not all properties support transition. Similar to animation, here is a list of all properties that support transition-- CSS animated properties

Of course, sometimes there are more exceptions. Some attributes that support transition do not support transition in certain states. Very typical are height: auto and width: auto.

stay CSS tricks: dynamic height transition animation In the article, such a scenario is mentioned:

The dynamic height transition animation of the element fails. The pseudo code is roughly as follows:

{
    height: unset;
    transition: height 0.3s linear;

    &.up {
        height: 0;
    }
    &.down {
        height: unset;
    }
}
Copy code

Transition is clearly set for the height attribute, but the transition animation is not triggered, but is directly launched in one step:

The reason is that CSS transition does not support the change of element height or width of auto.

For this kind of scene, we can use Max height to hack.

Here is a very interesting tip. Since height: auto is not supported, we will find another way to use the max height feature to achieve dynamic height scaling, such as:

{
    max-height: 0;
    transition: max-height 0.3s linear;

    &.up {
        max-height: 0;
    }
    &.down {
        max-height: 1000px;
    }
}
Copy code

You can see the specific details-- CSS tricks: dynamic height transition animation.

transition can finely control each attribute

continue. In transition, we can use transition: all 1s linear to uniformly add transition effects (time and slow function) to all transition supporting attributes under the element.

At the same time, we can also finely control each attribute:

{
    // You can
    transition: all 1s linear;

    // You can do the same
    transition: height 1s linear, transform 0.5s ease-in, color 2s ease-in-out;
}
Copy code

And, like animation, each transition supports delayed triggering:

div {
    // Delay 1 s to trigger the transition, and the transition animation time is 0.8 seconds
    transition: .8s transform 1s linear;
}
div:hover {
    transform: translate(120px, 0);
}
Copy code

It can be seen that whether it is a transition trigger or a transition reset, it will wait for 1 second before triggering.

Using this technique, we can realize the combination of some transition effects. First, we implement such a transition animation with width and height changes:

<div></div>
Copy code
div {
    position: relative;
    width: 200px;
    height: 64px;
    box-shadow: inset 0 0 0 3px #ddd;
}
div::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0; left: 0; width: 0; height: 0;
    box-sizing: border-box;
    transition: width .25s, height .25s, border-bottom-color;
    transition-delay: .25s, 0s, .25s;
}
div:hover::before {
    width: 200px;
    height: 64px;
    border-left: 3px solid #00e2ff;
    border-bottom: 3px solid #00e2ff;
}
Copy code

We control the height and width of the pseudo element of the element and the change of the lower border respectively, and set a delay of 0.25 seconds for the width transition animation and the color animation of the lower border. In this way, the height of the element will transition first. Since the overall transition animation world time is also 0.25s, the width transition animation will not start until the height transition animation is completed, and the color change of the lower border will also occur.

In this way, their transition animation can be linked together and reflected on the border of the element to see the effect:

Using the same principle, we can also use another pseudo element of the element, but their animation time needs to be added by 0.5 seconds as a whole until the above transition animation is completed:

div::after {
    right: 0;
    bottom: 0;
}
div:hover::after{
    transition: height .25s, width .25s, border-top-color .25s;
    transition-delay: 0.5s, 0.75s, 0.75s;
    width: 200px;
    height: 64px;
    border-top: 3px solid #00e2ff;
    border-right: 3px solid #00e2ff;
}
Copy code

In this way, we can combine the transition animation of two pseudo elements to obtain a complete border animation as follows:

For the complete Demo, you can poke here: CodePen Demo -- realize the animation effect of button border with transition delay

Therefore, if we reasonably control each attribute, we can combine it to get all kinds of interesting effects.

Change transition duration dynamically

There is also a very interesting technique. We can use some pseudo classes of elements to dynamically change the transition duration of elements.

for instance:

div {
    width: 140px;
    height: 64px;
    border: 2px solid red;
    transition: 3s all linear;
}
div:hover {
    transition-duration: .5s; 
    border: 2px solid blue;
}
Copy code

When hovering the element, change the transition duration of the transition animation of the element from 3s to 0.5s. In this way, when hovering the element, the duration of the transition animation is 0.5s, but the duration of the transition reset is 3s:

Using this tip, we try to make some interesting effects.

Signature board implemented by pure CSS

Using the above tips, we can implement a pure CSS signature board.

First, a 100x100 HTML grid layout is implemented in a container with a height and width of 500px. Both flex and grid can be used. Here, for convenience, I use Pug template engine.

div.g-box
    -for(var i=0; i<100; i++)
        div.g-row
            -for(var j=0; j<100; j++)
                div.g-item
 Copy code

For the convenience of illustration, I add a border to each grid. In fact, the background and grid are white:

In order to achieve the effect of signature, we add a hover event to each grid g-item, which changes the background color of the current grid. At the same time, the most important thing is that * * set a very large transition duration in the normal state and a very small transition duration in the hover state. The pseudo code is as follows:

.g-item {
    transition: 999999s;
}
.g-item:hover {
    background: #000;
    transition: 0s;
}
Copy code

See the effect:

In this way, when the mouse hover goes up, the background color is changed quickly because of transition: 0s. When the hover effect leaves, transition: 9999999s takes effect again, and black will fail at a very, very slow speed, so that you can't feel it changing.

Of course, if we want to realize the signature, what are the disadvantages? We need to realize that when the mouse hover s on the drawing board, the background color of the starting element will not change immediately. Only when the mouse is pressed (keep: active state), can we start to follow the mouse track to change the color. When the mouse stops clicking, it stops drawing.

There is a clever way to achieve this. We overlay a layer of div on the canvas. The z-index level is higher than the canvas. When the mouse hovers on the canvas, it is actually hovering on the mask layer. When the mouse is pressed and the: active event is triggered, add an: activate event to the element and remove the mask layer.

The pseudo code is as follows:

div.g-wrap
div.g-box
    -for(var i=0; i<100; i++)
        div.g-row
            -for(var j=0; j<100; j++)
                div.g-item
 Copy code
.g-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;

    &:active {
        display: none;
    }
}
Copy code

In this way, a complete signature board, or drawing board, can be realized:

Complete code implementation, and use CSS to add reset function. You can stamp here: CodePen Demo -- Pure CSS signature

Using this technique, we can actually use CSS to realize the function of following the mouse track (although it is chicken > <), and we can mix it with many other properties, such as mixing mode and filter.

Like this, from friends alphardex Using the above techniques, the mixed mode and filter are superimposed to achieve one effect of:

CodePen Demo -- Snow Scratch


 

Tags: Javascript css3 html css

Posted by sriusa on Sat, 16 Apr 2022 03:53:22 +0300