CODEWITHSUNDEEP
cssangularjs
Simran Kaur
Simran Kaur

Reputation: 1101

angular animation on ng-click

I am using angular and I need to add an animation that will increase the size of the image.

<div class="card">
  <div class="item images-parent">
  <img src="img/carryout-icon.jpg" class="left-image"></img>
  <img src="img/or.jpg" class="center-image"></img>
  <img src="img/delivery-icon.jpg" class="right-image"></img>
  </div> 
</div>

demo:

http://play.ionic.io/app/933b5926b6da

I want to add same animation/transition to first and third image when the user clicks on it and should be removed when user clicks on the other one i.e if I click on first image, it increases in size, then if I click on the other one, first one goes back to normal and second one has that animation.

Also, I have tried doing it but I am just not able to get ngAnimate, I am not a CSS person either. Also, Any resources to help someone like me would be appreciated.

I see events such as ngView , ng if e.t.c But I do not really want these animations on such events. Only when user clicks on the image. Am I even supposed to use ngAnimate here?

Upvotes: 1

Views: 861

Answers (1)

Babajide Fowotade
Babajide Fowotade

Reputation: 460

I do not know which particular image you intend to increase it's size on click, but here's one way to go about it. You can create a css class that increases the image, and you toggle on or off with NgClass, A tutorial Scotch.io

That is to make sure it changes class, but if you want to toggle on/off the class when you click CodePen snippet below

$scope.isActive = false;
$scope.activeButton = function() {
 $scope.isActive = !$scope.isActive;
}

Upvotes: 1

Related Questions