CSS旋轉變換不停留在新的位置

我想要做什麼應該是一些簡單的旋轉變換使用CSS轉換和轉換屬性時單擊一個元素，但是，旋轉似乎並沒有停留在其中新的位置。CSS旋轉變換不停留在新的位置

的HTML如下：

<div class="accordion-btn"> 
    <span class="arrowGreen">&gt;</span> <a href="#">Show help</a> 
</div>

我有一個箭頭設置如下的CSS轉換：

.arrowGreen { 
    -moz-transition: 0.5s ease-in-out; 
    -webkit-transition: 0.5s ease-in-out; 
    transition: 0.5s ease-in-out; 
}

我然後應用使用這樣的jQuery的點擊功能轉換：

$(document).ready(function() { 
    $('.accordion-btn').click(function (e) { 

    e.preventDefault(); 

    if ($(this).find('.arrowGreen').css('transform') != "rotate(90deg)") 
    { 
     $(this).find('.arrowGreen').css({ '-ms-transform': 'rotate(90deg)', '-moz-transform': 'rotate(90deg)', '-webkit-transform': 'rotate(90deg)', 'transform': 'rotate(90deg)' }); 
    } 
    else 
    { 
     $(this).find('.arrowGreen').css({ '-ms-transform': 'rotate(-90deg)', '-moz-transform': 'rotate(-90deg)', '-webkit-transform': 'rotate(-90deg)', 'transform': 'rotate(-90deg)'}); 
    } 
}

這在一定程度上起作用。單擊元素時，跨度會旋轉，但是，當它達到90度時，它會自動回到默認狀態。它不會再點擊旋轉，但在開發人員工具中檢查時，轉換樣式仍會附加到元素。我錯過了什麼嗎？

由於提前，亞倫

來源

2014-10-08 AaronUmhoefer

$(document).ready(function() { 
 
    $('.accordion-btn').click(function(e) { 
 
    e.preventDefault(); 
 
    $('.arrowGreen').toggleClass('rotate90'); 
 
    }); 
 
});

.arrowGreen { 
 
    -moz-transition: 0.5s ease-in-out; 
 
    -webkit-transition: 0.5s ease-in-out; 
 
    transition: 0.5s ease-in-out; 
 
    display: inline-block; 
 
} 
 
.rotate90 { 
 
    -ms-transform-origin: 50% 50%; 
 
    -webkit-transform-origin: 50% 50%; 
 
    -moz-transform-origin: 50% 50%; 
 
    transform-origin: 50% 50%; 
 
    transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="accordion-btn"> 
 
    <span class="arrowGreen">&gt;</span> <a href="#">Show help</a> 
 
</div>

來源

2014-10-08 11:16:22

我試過這個，它的工作原理。然而，浮動並不適用於我的設計，但如果沒有它，旋轉仍會恢復爲默認值。然後我嘗試使跨度顯示內聯塊（因爲浮動使它阻塞我相信），這似乎已經修復它。似乎不喜歡我可以收集的內聯元素？ – AaronUmhoefer 2014-10-08 11:55:07

@AaronUmhoefer：哦，我的道歉。「內聯塊」跨度很好.. 對不起。無論如何，讓我更改代碼... :) – 2014-10-08 12:35:54

在我oppinion你建議立即進行刪除使CSS類這樣

.rotate { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); }

而且使用類似$(".arrowGreen").toggleClass("rotate");上onClick()事件

來源

2014-10-08 11:00:00 Cassian

正是我一直在寫。我認爲這絕對是做到這一點的最佳方式，也是最可維護和可重用的。 – 2014-10-08 11:01:07

這是一個更清潔，謝謝。這現在允許旋轉在兩個方向上工作，但由於某種原因，初始旋轉仍然會回到它的默認狀態。現在發生了什麼：單擊accordion-btn元素 - >箭頭跨度旋轉90度 - >一旦旋轉完成，它會回到原始狀態（-90度） - >再次單擊該元素，並且箭頭對齊到90度角並從那裏旋轉回到正常。：S – AaronUmhoefer 2014-10-08 11:11:49

之所以你舊的工作不起作用是因爲你的變換聲明正在返回：

[Log] matrix(0.00000000000000006123233995736766, 1, -1, 0.00000000000000006123233995736766, 0, 0) (08_10_14.html, line 34)

顯然不匹配「rotate（90）;」

會的需要你做一些事情上所看到：http://css-tricks.com/get-value-of-css-rotation-through-javascript/

我認爲@Cassian對你最好的答案，但。

來源

2014-10-08 11:14:40 Zze

CSS旋轉變換不停留在新的位置

回答

相關問題