Javascript 设置伪类的动画

我正试图实现一种特殊的效果

onclick

。我已经使用父元素

div

和伪元素

：after

（请参见下面的代码片段）创建了一个有角度或剃刀刀片样式的

div

。我要做的是，当用户单击父元素时，我设置的“倾斜”属性将移动到不同的倾斜角度

我的问题是，无论我调用父对象还是伪对象，

onclick

我都无法让动画工作。谁能给我指出正确的方向吗

$（文档）.ready（函数（）{
$（'.slidedDiv'）。单击（函数（）{
$（'.slangeddiv.slangeddiv:after'）.toggleClass（'active'）；
});
});
*{
填充：0；
保证金：0；
}
斯莱德迪夫先生{
位置：相对位置；
宽度：100%；
高度：300px；
背景颜色：黄色；
}
.艾迪夫：之后{
位置：绝对位置；
宽度：100%；
身高：100%；
内容：''；
背景：继承；
排名：0；
右：0；
底部：0；
左：0；
变换原点：左上角；
变换：歪斜（10度）；
过渡：所有.3s易于输入输出；
}
.主动{
变换原点：右上角；
变换：歪斜（-10度）；
}
问题与
单击处理程序中的选择器有关。首先，元素只是
.slidedDiv
，因此重复该类不会匹配任何元素。只需在jQuery对象中使用
this
引用，就可以完全避免这个问题。其次，更重要的是，jQuery不能选择伪元素，因此包含
：after
将找不到任何内容

相反，您需要直接在
.slangedtdiv
上使用
toggle（）
活动的
类，然后根据
活动的
类的存在，在CSS规则中使用
：after
，如下所示：


$（文档）.ready（函数（）{
$（'.slidedDiv'）。单击（函数（）{
$（this.toggleClass（'active'）；
});
});
*{
填充：0；
保证金：0；
}
斯莱德迪夫先生{
位置：相对位置；
宽度：100%；
高度：300px；
背景颜色：黄色；
}
.艾迪夫：之后{
位置：绝对位置；
宽度：100%；
身高：100%；
内容：''；
背景：继承；
排名：0；
右：0；
底部：0；
左：0；
变换原点：左上角；
变换：歪斜（10度）；
过渡：所有.3s易于输入输出；
}
.slideddiv.active:之后{
变换原点：右上角；
变换：歪斜（-10度）；
}

Related-@Paulie\u感谢您的推荐。我已经从元素到类进行了编辑。非常感谢！计时器用完时，将标记为正确