Definition of transition

Transition is a compound attribute, including ==transition-property, transition-duration, transition-timing-function, and transition-delay==. Through the coordination of these four sub-attributes to complete a complete transition effect

  • Transition-property: transition-property (default: all)
  • Transition-duration: transition duration (default: 0s)
  • Transiton-timing-function: transition function (default ease function)
  • Transition-delay: indicates the transition delay time (default value: 0s).

[Note] Internet Explorer 9- does not support this attribute, safari3.1-6, ios3.2-6.1, android2.1-4.3 need to add -webkit- prefix; Other older browsers support the standard script

< style > / * 1. The transition transition the transition - property: transition properties (2) the transition - duration: the transition time 3. The transition - the timing - function: transfer function, */. Box {width: 100px; height: 100px; background-color: pink; transition-property: width, transform; transition-duration: 2s; transition-timing-function: liner; transition-delay: 1s; } /* .box:hover { width: 200px; transform: translate(600px, </style> <body> <div class="box">div</div> <button class=" BTN "> Click </button> </body> <script type="text/javascript"> let btn = document.querySelector('.btn'); let box = document.querySelector(".box"); let x = 600; btn.onclick = function () { box.style.width = 200 + "px"; Box-style. Transform = "translate(" + 600 + "px)"; */ box.style.transform = 'translate(${x}px)'; box.style.transform = `translate(${600}px)`; } </script>Copy the code

twoThe composite properties

The four child properties of transition are only required and cannot be 0. Among them, and are time. When two times occur at the same time, the first is, the second; When there is only one time, it is, and the default is 0

transition: || || ||

[Note] The four attributes of transition cannot be separated by commas, only Spaces. Because commas separate the transition properties from each other (the transition property supports multiple values, which is covered later); The four transition-related subattributes separated by Spaces represent different attributes

< span style> Transition-property transition-duration transition-timing-function transition-delay 1. Transition-property Is optional Transition-timing -function: 4. Transition-delay delay function */. Div {width: 100px; height: 100px; background-color: pink; margin: 100px auto; transition: transform 1s linear 0s; } .div:hover { transform: rotate(360deg); } </style> <body> <div class="div">div</div> </body>Copy the code

Three. Transition properties

3.1 the transition – the property

Value: none | | all [and] *

Default value: all

Apply to: all elements

Inheritance: none

None: no style is specified. All: The default value for all styles of the specified element that support the transition-property property: transitable styles that can be separated by commas

3.2 Transitive styles

Not all CSS style values can be transitioned; only properties with intermediate values can be transitioned

Vstart = start value; Vend = end value; Vres = median; P = Output value of the transition function Vres = (1-p) * Vstart + p * Vend When Vres has a valid value, the CSS style can be transitioned

  • Color: background-color border-color outline-color
  • Backround -position left right top bottom
  • Length: [1]max-height min-height max-width min-width height width [2]border-width margin padding outline-width outline-offset [3]font-size line-height text-indent vertical-align [4]border-spacing letter-spacing word-spacing
  • Number: opacity z-index font-weight zoom
  • Combination: text-shadow transform box-shadow clip
  • Other: gradient

Iv. Duration of transition

This property is in seconds s or milliseconds ms

transition-duration

Value: [and] *

The initial value is 0s

Apply to: all elements

Inheritance: none

[Note] This attribute cannot be negative

[Note] If the value is 0s, the value is the default value; if it is 0, the value is invalid. So you have to bring units

[Note] When the value is single, that is, all transition attributes correspond to the same time; If the value is multiple, the transition attributes correspond to the duration in sequence

5. Transition delay time

This attribute defines how much time the element attribute has to delay before the transition effect begins, in seconds s or milliseconds ms

transition-delay

Value: [and] *

The initial value is 0s

Apply to: all elements

Inheritance: none

[Note] If this property is negative, there is no delay effect, but the starting value of the transition element changes from 0 to a set value (set value = delay time + duration). If the set value is less than or equal to 0, there is no transition effect; If this value is greater than 0, the transition element completes the rest of the transition effects from this value

[Note] If the value is 0s, the value is the default value; if it is 0, the value is invalid. So you have to bring units

[Note] When the value is single, that is, all transition attributes correspond to the same time; If the value is multiple, the transition attributes correspond to the duration in sequence

6. Transition time function

The transition time function is used to define the transition speed change effect of the element transition attribute with time change

transition-timing-function

Value: [and] *

Initial value: ease

Apply to: all elements

Inheritance: none

The values

The transition time function has three values: keyword, steps function and Bezier function

Steps function

The Steps step function runs by dividing the transition time into equal time intervals

The steps step function is

steps(<integer>[,start | end]?)
Copy the code
< INTEGER >: specifies the number of intervals (the value can only be a positive integer). Second parameter: This parameter is optional. The default value is end, indicating that the start value is kept once. If the parameter is start, the start is not maintainedCopy the code

6.1 Bessel curve

Bessel curves are controlled by four control points p0-p3, where p0 represents (0,0) and p3 represents (1,1). That’s by determining the values of p1(x1,y1) and p2(x2,y2)

transition-timing-function: cubic-bezier(x1,y1,x2,y2);

[note]x1,y1,x2,y2 are all values from 0 to 1.

6.2The keyword

The keyword is actually a special value of the Bezier or steps function

  • Ease: Slow at the beginning and end and fast in the middle. Equivalent to a cubic bezier – (0.25, 0.1, 0.25, 1)
  • Linear: uniform. Equivalent to a cubic bezier – (0,0,1,1)
  • Ease-in: slow to start. Equivalent to a cubic bezier – (0.42, 0,1,1)
  • Ease-out: ends slowly. Equivalent to a cubic bezier – (,0,0.58 0, 1)
  • Ease-in-out: Similar to but more extensive than ease. Equivalent to a cubic bezier – (0.42, 0,0.58, 1)
  • Step-start: directly at the end. Equivalent to steps (1, start)
  • Step-end: at the beginning and ends after a time interval. Equivalent to steps (1, end)

7. More value

Multiple transition property values are separated by commas to indicate that you can set transition properties for multiple values at the same time

transtion: <single-transition>[,<single-transition>]*
Copy the code
<single-transition>: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
Copy the code
// Property is all, timing-function is linear,delay is 0s, duration is 0s. Transition: 0s;Copy the code

7.1 if different transition – the property value, corresponding to the transition – delay | the transition – the timing – function | transition – duration of the attribute values are at the same time, Set one of these properties

test1{ transition-property: width,background; transition-delay: 200ms; transition-timing-function: linear; transition-duration: 2s; Test2 {transition: width 2s linear 200ms, background 2s linear 200ms; }Copy the code

7.2 when the transition – the number of the property value more than the corresponding transition – delay | the transition – the timing – function | transition – duration of the attribute value (= = number of attribute value is greater than 1), Will start == in order

test1{ transition-property: width,background,opacity; transition-duration: 2s,500ms; transition-timing-function: linear,ease; transition-delay: 200ms,0s; */ #test2{transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms; }Copy the code

7.3 when the transition – the number of the property value is less than the corresponding transition – delay | the transition – the timing – function | transition – duration of the number of attribute values, == Redundant attribute values will not be valid ==

test1{ transition-property: width; transition-duration: 2s,500ms; transition-timing-function: linear,ease; transition-delay: 200ms,0s; } /* similar to */ #test2{transition: width 2s linear 200ms; }Copy the code

7.4 When an invalid value occurs in the transition-property value, it still corresponds to the values of other transition properties in the same order.

test1{ transition-property: width,wuxiao,background; transition-duration: 2s,500ms; transition-timing-function: linear,ease; transition-delay: 200ms,0s; } /* similar to */ #test2{transition: width 2s linear 200ms,background 2s linear 200ms; }Copy the code

7.5 If some of the transition-property values are repeated more than once, the last value of the transition-property value is used. All the previous values are considered invalid ==, but they still correspond to other values of the transition property in sequence

test1{ transition-property: width,width,background; transition-duration: 2s,500ms; transition-timing-function: linear,ease; transition-delay: 200ms,0s; } /* similar to */ #test2{transition: width 500ms ease 0s,background 2s linear 200ms; }Copy the code

Viii. Transitional phase

[1] Transition start time = time of style change + transition delay time; Transition end time = transition start time + transition duration

[2] Initial value of transition = value of transition attribute before transition; The end of transition value = the transition attribute value after the transition is completed

[3] Transition is divided into two stages: forward and reverse. If the forward phase enters the reverse phase after a period of time, the initial value of the reverse phase is the instantaneous value at the end of the forward phase

[4] Take hover as an example. If the transition is set in the non-hover state of the element, it is equivalent to the reverse state of setting. And forward and reverse are consistent. If the transition element is set to the hover state, the forward state is set to the hover state, and the reverse state is set to the non-hover state

.test{
    width: 100px;
    transition: 3s;
}    
.test:hover{
    width: 500px;
    transition: 500ms;
}
Copy the code

[5] If the child element and the parent element have the same transition attributes. If the parent element is transitioning when the child element transition is triggered, the value of the intermediate state of the parent element transition is used as the initial value of the child element transition

.box:hover{
    font-size: 50px;
}
.test:hover{
    font-size: 30px;
}
Copy the code
<div class="box">
    <div class="test">test</div>
</div>
Copy the code

7.6 If the transition start value or the transition start value is AUTO, the browser does not calculate the specific value and the transition effect does not occur. So to transition some attributes, you first need to reset them to a specific numeric value

[Note] Earlier versions of the WebKit kernel browser are buggy and have a reverse transition effect

.test{
    width: 100px; -webkit-transition: width 2s;
    transition:width 2s;
}    
.test:hover{
    width:auto;
}
Copy the code

[7] Implicit transitions refer to changes in one attribute that cause changes in another attribute. If the border-width is 1em, the border-width will change accordingly when the font size changes. Firefox and Internet Explorer support implicit transitions. The WebKit kernel browser does not support implicit transitions.

.test{
    border: 1px solid black; -webkit-transition: font-size 2s;
    transition:font-size 2s;
    font: 20px/100px "宋体";
}    
.test:hover{
    font-size: 40px;
    border-right-width: 1em;
}
Copy the code

Viii. Trigger mode

Generally, there are three ways to trigger transition, namely, pseudo class trigger, media query trigger and javascript trigger. Commonly used pseudo class triggers include hover, :focus, :active and so on

8.1 Hover: mouse hover trigger

8.2 Active: Triggered when the user clicks an element and holds down the mouse

8.3 Focus: Triggered when the focus is obtained

8.4 @Media Trigger: This parameter is triggered when the media query conditions are met

/* Trigger @media (max-width: 1000px){.test{width: 500px; }}Copy the code

8.5 Click event: Triggered when the user clicks an element

test.onclick = function(){ test.style.width = '300px'; setTimeout(function(){ test.style.width = '100px'; }, 3000); }Copy the code