关闭面板后重新播放动画 [英] Animate back when panel has been closed

问题描述

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

I have some arrows on the right side of my panels. So when I click on them, they get rotated.

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

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

I would now like to rotate them back to the starting point if the panel has been closed.

我的代码不是很高级，但这是我到目前为止的内容: https://jsfiddle.net/xvrccycm /

My code is not very advanced but this is what I have so far: https://jsfiddle.net/xvrccycm/

推荐答案

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

You don't have to use JavaScript for that. You can change transform based on the collapsed class.

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

这篇关于关闭面板后重新播放动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！