简体中文(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
848
<!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/

天蓬老师
天蓬老师

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

全部回覆(4)
Peter_Zhu
Peter_Zhu2017-04-17 11:57:50 4樓

傳送門答案在此。

點贊 +0
新增回覆
迷茫
迷茫2017-04-17 11:57:50 3樓

1.測試結果和參數的個數是否匹配無關
2.執行動畫回退的時候,rotate的角度差與360求餘數,實際按餘數來執行rotate

點贊 +0
新增回覆
Ty80
Ty802017-04-17 11:57:50 2樓

剛試了一下，不只是個數的問題，你交換一下位置，也不行。
應該就是這樣，搜了一下也沒有人遇到這問題

點贊 +0
新增回覆
洪涛
洪涛2017-04-17 11:57:50 1樓

先明白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>

這樣應該就解決了。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！