css3 过渡和动画

Posted 2022-12-08 orochiz-

过渡 transition

1.过渡的定义和使用

在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果，希望它以动画的形式在一定的时间内，从旧的样式转变成新的样式，而这个过程就是过渡。过渡其实就是一个简单的动画效果

transition是简写之后的属性名，它其实是4个属性合并而成的，按顺序依次是：
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

注意：添加的属性他的属性值必须有明确的数值，例如color，left，width之类的，如果是display这种则无效

transition我们很少拆分使用，通常都是简写
所有属性过渡

transition: all 1s;

多个属性过渡,各个属性用 逗号 隔开

transition: width 1s,height 1s;

设置延迟和过渡函数

transition: width 2s ease 1s;

2.过渡的时间函数

常用的值有：
ease - 先快后慢
linear - 匀速
ease-in - 先慢后快
steps - 将过渡时间划分成大小相等的时间时隔来运行，通俗来说就是跳着走

以下面的代码为例

transition: width 2s steps(4);

3.transition事件

transitionend - 过渡完成之后就会触发这个事件
transitionstart - 过渡开始执行就会触发 这个事件（延迟结束之后才执行）
注意：只能用addaddEventListener添加事件，不支持属性赋值函数的形式监听

<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>

过渡事件触发的次数与transition-property过渡属性的个数有关。过渡属性有几个就会触发几次

transition: width 2s,height 1s;

div.addEventListener("transitionend",function()
        console.log("过渡结束了") //触发两次
    )

如果过渡属性是复合属性，如border-width相当于是border-top-width、border-bottom-width、border-left-width和border-right-width这四个属性的集合。则过渡事件触发4次

动画

1.动画的定义

动画可以理解成多段多度的集合，通过设置关键帧来控制样式变化的过程。例如一个元素的宽度从200px过渡到600px，起点和终点已经固定了，能改变的无非就是事件函数，控制样式变化的速度。在这阶段中样式始终朝着一个方向发展，不可能超出200-800的范围。而动画可以设置若干个关键帧，来控制不同时段元素样式的走向，达到一个视觉动画的效果

2.注册动画

创建动画就是创建一个动画名称，里面设置了若干个关键帧，控制元素在不同时段的样式的变化方向
关键帧可以用百分比，也可以用from/to，from代表0%,to代表100%

@keyframes move 
    0% 
        left: 20px;
        top: 20px;
    

    40% 
        left: 600px;
        top: 0;
    

    80% 
        left: 600px;
        top: 400px;
    

    100% 
        left: 300px;
        top: 200px;
    

3.应用动画

语法：animation:动画名 持续时间

.item
    animation: move 3s;

4.其余属性

animation-name:动画名称
animation-duration:持续时间 单位/秒
animation-delay:延迟 单位/秒
animation-timing-function: 时间曲线
animation-iteration-count:循环次数 infinite为无限次
nimation-direction:动画方向
animation-fill-mode：当动画完成时，或当动画有延迟时，要应用的规则

解析：
动画默认只会执行一次，如果想无限循环执行下去，请设置 animation-iteration-count:infinite

animation: move 3s infinite;

动画默认只会朝着一个方向执行，即使设置了多次循环，动画依然是用一个方向，如果想设置来回交替，请设置animation-direction:alternate

animation: move 3s infinite alternate;

动画结束后会回到默认的样式，例如前面的例子，动画结束的位置是300,200，但是它马上会退回到进入动画前的0,0位置，如果要进行设置，animation-fill-mode属性有几个值可以选：
none - 动画完成回到原先的样式（默认）
forwards - 停留到动画结束时的状态
backwards - 如果动画有延迟，元素会马上渲染成0%设置的样式
both:相当于（forwards + backwards）都保留

animation: move 6s 1s 2 both;

5.用js控制播放

可以用js控制animation-play-state属性来控制动画的播放与暂停
它有2个值：
running - 播放
paused - 暂停

<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>