помогите с анимацией по клику

344

14 января 2017, 13:13

Здравствуйте Уважаемые Айти специалисты! Помогите сделать так чтобы по клику по before квадрату срабатывала анимация scale и before элемент немного увеличивался в размере но по клику по диву #А3 ничего не происходило только по before

#A3{ 
	width:150px; 
	height:150px; 
	background-color:green; 
position:relative; 
} 
#A3:before{ 
content:""; 
width:50px; 
height:50px; 
position:absolute; 
top:50px; 
left:50px; 
background-color:black;

<!DOCTYPE html> 
<html> 
<head> 
	<title>google</title> 
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script> 
	<script type="text/javascript" src="js/js.js"></script> 
	<link rel="stylesheet" type="text/css" href="css/style.css"> 
	<link rel="stylesheet" type="text/css" href="lib/animate.css"> 
</head> 
<body> 
<div id="A3"></div> 
</body> 
</html>

Answer 1

Вы не можете поймать событие от псевдо-элемента. Единственный способ — проверить вручную координаты клика:

$('#A3').click(function(e) { 
  if (e.pageX > 50 && e.pageX < 100 && e.pageY > 50 && e.pageY < 100) 
    $('#A3').toggleClass('active') 
});

#A3 { 
  width: 150px; 
  height: 150px; 
  background-color: green; 
  position: relative; 
} 
#A3:before { 
  content: ""; 
  width: 50px; 
  height: 50px; 
  position: absolute; 
  top: 50px; 
  left: 50px; 
  background-color: black; 
  transition: all 0.5s; 
} 
#A3.active:before { 
  transform: scale(1.2, 1.2) 
}

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

Answer 2

Это невозможно. Попробуйте изменить разметку, например:

#A3{
    width:150px;
    height:150px;
    background-color:green;
    position:relative;
}
#A3 .pseudo-before{
    content:"";
    width:50px;
    height:50px;
    position:absolute;
    top:50px;
    left:50px;
    background-color:black; 
}

var a3bef = document.querySelector('#A3 .pseudo-before');
a3bef.addEventListener('click', scaleUp);
function scaleUp() {
    this.style.transform = 'scale(1.5)';
    event.stopPropagation();
}
<!DOCTYPE html>
<html>
<head>
    <title>google</title>
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="lib/animate.css">
</head>
<body>
<div id="A3"><div class="pseudo-before"></div>
</body>
</html>

https://jsfiddle.net/0tcu2ptu/

а тут пример, где оно и увеличивается и уменьшается https://jsfiddle.net/0fxyw7xg/1/