Transition transition
1. The definition and use of transition
In the absence of transition property, when the property value of an element changes, the browser will be one element of this style instantly rendered into a new property value. For example, a positioning element top: 0, dynamic modification to top: 100px, this element will instantly went to the location 100px, sometimes we have to achieve a certain visual effect, want it in the form of animation within a certain period of time, from the old style into a new style, and this process is the transition. Transition is actually a simple animation effects
After the transition is shorthand name attribute, it is actually a merger of four attributes, are, in order:
transition-Property: transition property (the default is All)
transition-DURATION: the duration of the transition (the default is 0s)
transiton -timing-function: transition function (default ease function)
transition-delay: delay time of the transition (the default is 0s)
Note: Adding attributes his property value must have clear values, such as color, left, width and the like, and if this display is invalid
We rarely use the split transition, often abbreviated
all the attributes transition
transition: all 1s;A plurality of transition attributes, each attribute separated by commas
transition: width 1s,height 1s;Set the delay and transition function
transition: width 2s ease 1s;2. The transition function of time
Common values are:
EASE - slow down after
linear - uniform
ease-in - after the first slow-fast
steps - the transition time into equal size to run after a lapse of time, it is popular to go dancing
In the following code as an example
transition: width 2s steps(4);3.transition event
transitionend - This event is triggered after the transition is complete
transitionstart - begin the transition will trigger this event (execution only after the delay)
Note: You can add an event with addaddEventListener, does not support the form of property assignment function monitor
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）
<script>
var div = document.querySelector("div")
var scale = true
div.onclick = function(){
if(scale){
div.style.width = "400px"
}else{
div.style.width = "200px"
}
scale = !scale
}
// 这个方式监听不支持
div.transitionend = function(){
console.log("过渡结束了")
}
// 下面的写法才支持
div.addEventListener("transitionend",function(){
console.log("过渡结束了")
})
div.addEventListener("transitionstart",function(){
console.log("过渡开始了")
})
</script>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）The number of transition events triggered by the transition-property related to the number of transition properties. There are several attributes transition will trigger a few times
transition: width 2s,height 1s;div.addEventListener("transitionend",function(){
console.log("过渡结束了") //触发两次
})If the transition is a composite property attributes, such as the border-width equivalent border-top-width, set border-bottom-width, border-left-width and border-right-width of these four properties. The transition event-triggered 4 times
Animation
1. Definition animation
Animation can be understood as a set of plurality of multi-stage, the process is controlled by providing a pattern change key frames. For example, the width of an element of the transition from 200px to 600px, start and end points have been fixed, nothing more than change the event function, speed control style changes. Style is always moving in a direction at this stage, it is impossible out of range 200-800. And a plurality of animation key frames may be provided to control the elements to different time patterns, to achieve the effect of a visual animation
2. Registration animation
Create Animation Animation is to create a name, there is provided a plurality of key frames, a change in direction of the control element patterns different periods of
keyframes percentage, can also be used from / to, from the representative 0%, to 100% representatives
@keyframes move {
0% {
left: 20px;
top: 20px;
}
40% {
left: 600px;
top: 0;
}
80% {
left: 600px;
top: 400px;
}
100% {
left: 300px;
top: 200px;
}
}3. Application Animation
Syntax: animation: Animation name Duration
.item{
animation: move 3s;
}4. The remaining properties
animation-name: name of the animation
animation-duration: duration units / second
animation-delay: Delay units / second
animation-timing-function: time curve
animation-iteration-count: number of cycles infinite infinite times
nimation-direction: direction of the animation
animation rules when the animation is complete, or when the animation delay, to be applied: -fill-mode
Analysis:
Animation default only once, if you want to go on an endless loop execution, set the animation-iteration-count: infinite
animation: move 3s infinite;The default animation will only perform in one direction, even if the set number of cycles, the animation is still used in one direction, if you want to set up alternate back and forth, set the animation-direction: alternate
animation: move 3s infinite alternate;After the end of the animation will return to the default style, such as the previous example, the animation end position is 300,200, but it could soon return to the 0,0 position before entering the animation, if you want to set, animation-fill-mode property a few values can be selected:
none - back to the original style of animation is complete (default)
Forwards - stay to the state at the end of the animation
backwards - if there is animation delay, the elements will immediately rendered style 0% set
both: the equivalent of (forwards + backwards) are reserved
animation: move 6s 1s 2 both;The playback control by js
Js can control the animation-play-state property to control the play and pause the animation
it has two values:
running - Play
paused - Pause
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）
<script>
var run = true
var div = document.querySelector("div")
function running(){
if(run){
// 如果是播放状态就暂停
div.style.animationPlayState = "paused"
}else{
div.style.animationPlayState = "running"
}
run = !run
}
</script>