Question

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

我的问题是无论我是调用父节点还是伪节点，onclick我都无法使动画生效。有人能指出我正确的方向吗？

＆＃13;

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

＆＃13;

* {
	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);
}

＆＃13;

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

＆＃13;

Answer 1

问题在于click处理程序中的选择器。首先，元素只是.slantedDiv，因此重复该类将不匹配任何元素。只需在jQuery对象中使用this引用即可完全避免该问题。其次，更重要的是，jQuery无法选择伪元素，因此包括:after将无法找到任何内容。

相反，您需要toggle()直接active上的.slantedtDiv课程，然后根据{{1}的存在情况在CSS规则中使用:after } class，类似这样：

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);
}

动画类的动画

1 个答案: