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

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