触发过渡平移之后，鼠标停留就不会触发过渡效果了，求解？

Question

div style: transition:all 1s;div:hover{transform:translate(0px,-50px);}用JS代码obj.style.transform="translate(200px,0px)";

Answer 1

transition不可以infinite loop，只有aniamtion才可以。

<style>    .hover.in { animation: in 1s linear infinite }    .hover.out { animation: out 1s linear }    @keyframes in {        from { transform:translate(0,0); }        to { transform:translate(0px,-50px); }    }    @keyframes out {        from { transform:translate(0,-50px); }        to { transform:translate(0,0); }    }</style> <div class='hover'>Hover</div> <script>var hover = document.querySelector('.hover')hover.addEventListener('mouseover', function() {    if (!this.classList.contains('in')) {        this.classList.remove('out')        this.classList.add('in')    }})hover.addEventListener('mouseout', function() {    if (!this.classList.contains('out')) {        this.classList.remove('in')        this.classList.add('out')    }})</script>