面板关闭时返回动画答案

【问题标题】：Animate back when panel has been closed面板关闭时返回动画
【发布时间】：2016-12-01 10:31:20
【问题描述】：

我的面板右侧有一些箭头。因此，当我单击它们时，它们会旋转。

$('.arrow').click(function() {
    $(this).css('transform', 'rotate(90deg)');
});

如果面板已关闭，我现在想将它们旋转回起点。

我的代码不是很高级，但这是我目前所拥有的：https://jsfiddle.net/xvrccycm/

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您不必为此使用 JavaScript。您可以根据collapsed 类更改转换。

.panel-heading .arrow {
  transform: rotate(90deg);
}
.panel-heading .collapsed .arrow {
  transform: rotate(0);
}

JSFIDDLE

【讨论】：

哦，我不知道。谢谢你，这对我有帮助。

【解决方案2】：

js:

$('.arrow').click(function() {
    $(this).toggleClass('turn');
});

css:

.turn{
  -webkit-transform : rotate(90deg);
}

【讨论】：

【解决方案3】：

你好试试下面的代码..

$('.arrow').click(function() {

    var _flag; 
    // storing previous state..
    if(!$(this).attr('rotated'))
        _flag = true;
    else
        _flag = false;

    $(".arrow").css('transform', 'rotate(0deg)').removeAttr('rotated'); // this will reset all other arrow..


   // Applying new state...
    if(_flag)
       $(this).attr('rotated',true).css('transform', 'rotate(90deg)');
});

【讨论】：

【解决方案4】：

保持打开状态并检查

var open = false;
$('.arrow').click(function() {
  open = !open;
  if(open)
        $(this).css('transform', 'rotate(90deg)');
  else
    $(this).css('transform', 'rotate(0deg)');
});

JSFIDDLE

【讨论】：