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旋转变换不停留在新的位置

回答

相关问题