动画类的动画

Question

我试图达到一个特殊的效果onclick。我使用父div和伪元素div-element创建了一个有角度或剃刀刀片风格的:after（参见下面的代码片段）。我想要做的是当用户点击父元素时，我设置的倾斜属性，转移到不同的倾斜角度。

我的问题是，无论我是否调用父或伪，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()上active .slantedtDivclass，然后根据: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>