问题描述
<!DOCTYPE html><html> <head><meta charset='UTF-8'><title></title><style type='text/css'> .test{margin: 50px;width: 100px;height: 100px;background-color: red;transition: all 1s;transform: rotate(0) translateX(5px); } /*css1*/ .test:hover{transform: rotate(360deg); } /*css2*/ #btn:hover+.test{transform: rotate(360deg) translateX(0px); } </style> </head> <body><button id='btn'>css2</button><p class='test'> css1</p> </body></html>
简化了一下样式还是要问呀。1.初始样式为rotate(0) translateX(5px);过渡至css1,只能触发translateX(5px)的过渡效果。2.过渡至css2,可以看到平移5px和旋转360度的效果。如果说rotate的过渡表现是(初始-最终)%360的话，为什么前者是0deg而后者是360deg。总结一下就是前后transform后具体属性值和属性顺序不匹配则无法有效触发rotate的过渡，是什么原因。不匹配举例:1.从transform: rotate(0) translateX(5px);至transform: rotate(360deg);2.从transform: rotate(0) translateX(5px);至transform: translateX(5px) rotate(360deg);3.从transform: translateX(5px);至transform: translateX(5px) rotate(360deg);https://jsfiddle.net/23cc8LvL/
问题解答
回答1：传送门答案在此。
回答2：1.测试结果和参数的个数是否匹配无关2.执行动画回退的时候,rotate的角度差与360求余数,实际按余数来执行rotate
回答3：刚试了一下，不只是个数的问题，你交换一下位置，也不行。应该就是这样，搜了一下也没有人遇到这问题
回答4：先明白transition实际上就是为元素初始位置发生变化的这个过渡加上补间动画。类似于PPT的“变体”和keynote的“神奇移动”。楼主的问题主要是因为点击完btn1后元素旋转到的位置恰巧和btn2事件执行完元素的位置重合了，所以看不见补间动画，换句话说就是没有发生相对位移。解决方法：将btn2事件代码里的rotate(180deg)改为其他数值，但要避免再是其完整圈数的倍数以免重合。例：
<script type='text/javascript'>var testEl = document.querySelector(’#test’);var btn1 = document.querySelector(’#btn1’);var btn2 = document.querySelector(’#btn2’);btn1.onclick = function(){ testEl.style.transform = ’translateX(100px) scale(1.8) rotate(540deg)’; testEl.style.transition = ’all 1s’;};btn2.onclick = function(){ testEl.style.transform = ’skew(30deg) rotate(90deg)’; testEl.style.transition = ’all 1s’;}</script>
这样应该就解决了。
