transition过渡中是否能暂停？

 transition过渡中是否能暂停？

                                如图：     小人从a点走向b点，

                                                a点距离是:left 0px

                                                小人dom class名称为img_p

                                                b点距离是:left 1000px

                                                小人父级dom名称为container

                                                transition过渡时间是10s

    现在小人从a点走向b点，我想在小人中途过渡到3s的时候让小人过渡失效怎么办，使其小人3s后回到原始位置，并且过渡为0s？

---

        这样写会有用嘛，会发生什么事?

      

        window.onload=function(){

            let img_p=document.querySelector('.img_p')

            img_p.style['transition']='10s'

            img_p.style['left']='1000px'

            setTimeout(()=>{

                img_p.style['transition']='0s'

            },3000)

        }

        答: 这样做没有用。transition过渡中无法改变transition的属性。

             小人从left:0px点开始走，10s后走到left:1000px后transition才会改变成0的属性

---

  问：  那如何才能再transition运行中途改变属性呢，小人原本6s开始运行从0走到1000，现在需要3s后改变属性,使其小人3s后回到原始位置，并且过渡为0s？

            window.onload=function(){

                let container=document.querySelector('.container')

                let img_p=document.querySelector('.img_p')

                img_p.style['transition']='10s'

                img_p.style['left']='800px'

                setTimeout(()=>{

                    console.log(111)

                    let new_pic=document.createElement('img')

                    new_pic.src="http://192.168.8.174:8080/img/demo.b0088b8a.gif"

                    new_pic.classList.add('img_p')

                    new_pic.style['transition']='0s'

                    container.replaceChild(new_pic,img_p)

                },3000)

        }

答：获取父级dom后，3s后将小人dom替换成一个全新的dom节点，替换过后的节点dom不会继承之前的trnasition属性，能够立即更改transition属性

用途：能够立刻改变小人轨迹与路程时间，可做用于突然性小人加速或者是减速状态，有倍速的作用