javascript - 动画伪类

Question

我正在尝试实现特定效果 onclick。我使用父 div-element 和一个伪元素 :after 创建了一个有 Angular 或 Razor Blade 样式的 div(请参阅代码段以下)。我想要实现的是，当用户单击父元素时，我设置的倾斜属性会移动到不同的倾斜 Angular 。

我的问题是，无论我调用父类还是伪类，onclick 我都无法使动画正常工作。谁能指出我正确的方向？

$(document).ready(function() {
	
	$('.slantedDiv').click(function() {
		$('.slantedDiv .slantedDiv:after').toggleClass('active');
	});
});

* {
	padding: 0;
	margin: 0;
}

.slantedDiv {
	position: relative;
	width: 100%;
	height: 300px;
	background-color: yellow;
}

.slantedDiv:after {
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	background: inherit;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform-origin: top left;
	transform: skewY(10deg);
	transition: all .3s ease-in-out;
}

.active {
	transform-origin: top right;
	transform: skewY(-10deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slantedDiv"></div>

Answer 1

问题与 click 处理程序中的选择器有关。首先，元素只是.slantedDiv，所以重复类不会匹配任何元素。您可以通过在 jQuery 对象中使用 this 引用来完全避免该问题。其次，更重要的是，jQuery 不能选择伪元素，所以包含 :after 将找不到任何东西。

相反，您需要直接toggle() .slantedtDiv 上的active类，然后使用:after 在你的 CSS 规则中基于 active 类的存在，像这样:

$(document).ready(function() {
  $('.slantedDiv').click(function() {
    $(this).toggleClass('active');
  });
});

* {
  padding: 0;
  margin: 0;
}

.slantedDiv {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: yellow;
}

.slantedDiv:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  background: inherit;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: top left;
  transform: skewY(10deg);
  transition: all .3s ease-in-out;
}

.slantedDiv.active:after {
  transform-origin: top right;
  transform: skewY(-10deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slantedDiv"></div>