简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
前端 - transform后参数不同，rotate无法正常触发transition的问题。
天蓬老师
天蓬老师 2017-04-17 11:55:50
0
4
845
<!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/

天蓬老师
天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

reply all(4)
Peter_Zhu
Peter_Zhu2017-04-17 11:57:50 4 floor

The answer to the portal is here.

Like +0
Add Reply
迷茫
迷茫2017-04-17 11:57:50 3 floor

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

Like +0
Add Reply
Ty80
Ty802017-04-17 11:57:50 2 floor

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

Like +0
Add Reply
洪涛
洪涛2017-04-17 11:57:50 1 floor

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>
This should solve it.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！