<!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/
迷茫2017-04-17 11:57:50
1. Whether the test result matches the number of parameters has nothing to do with it
2. When executing animation rollback, the rotation angle difference is the remainder of 360, and the rotation is actually executed based on the remainder
PHP中文网2017-04-17 11:57:50
I just tried it, and it’s not just a matter of the number. Even if you change the positions, it won’t work.
This should be it, I searched and no one has encountered this problem
PHP中文网2017-04-17 11:57:50
First understand that transition is actually adding a tween animation to the transition when the initial position of the element changes. Similar to the "variation" of PPT and the "magic move" of keynote.
The original poster’s problem is mainly because the position to which the element rotates after clicking btn1 happens to coincide with the position of the element after the btn2 event is executed. Therefore, the tweening animation cannot be seen. In other words, the relative position does not occur. Displacement. Solution: Change rotate(180deg) in the btn2 event code to other values, but avoid multiples of its complete rotation to avoid overlap.
Example:
<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>