Seeking assistance with achieving a unique effect on click event. I have set up a slanted or razor-blade style div using a parent div element and a pseudo-element :after (as shown below). My goal is to change the skew angle when the user clicks on the parent element. However, I am facing issues in getting the animation to work whether I target the parent or the pseudo element on click. Any guidance in the right direction?
$(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>