我可以使用 javascript 原型来制作点击动画吗？

Question

我有这个非常简单的函数绑定：

$('a.accordion-toggle').click(function() {
  $(this).children('.glyphicon').toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
});

当我单击一行文本时，它会替换我的人字形。我考虑的不是替换，而是将人字形旋转 90 度的动画。我刚刚阅读了有关原型的内容以及如何同时向该原型的所有对象添加一个函数。我的问题（因为我是原型的新手）是我可以从 jquery 选择器创建原型并向其添加函数吗？

有点像，

DropdownArrow = $('a.accordion-toggle')
DropdownArrow.prototype.turn = function(){...}

Answer 1

我会在单击时切换 class，使图标具有动画效果，例如：

JS

$('a.accordion-toggle').click(function() {
  $(this).children('.glyphicon').toggleClass('rotate-icon');
});

CSS

.rotate-icon{
    transform: rotate(180deg);
}

更新

我忘了提到您需要向要设置动画的元素添加过渡以创建漂亮的平滑动画效果，例如：

a {
    transition: 350ms cubic-bezier(0.4,0.6,0.2,0.7);
}

你也可以使用 ease-in/ease-out 等作为缓动部分，但这里我使用的是 cubic-bezier，它可以让你更好地控制缓动 - here's a tool you can use to play around/learn about it

Answer 2

可以，但是像这样：

$.prototype.turn = function(){
  //your function
}

$('a.accordion-toggle').turn();

Can I use a javascript prototype to animate on click?