CODEWITHSUNDEEP
jqueryanimationangularjs
user1386906
user1386906

Reputation: 1179

Animate dom element when other dom element is added in AngularJS

I want to animate an dom element when a particalar view is added through a route. I know how to animate the view element that is added like so:

HTML

<div data-ng-view
     data-ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></div>

CSS3

.view-enter, .view-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.view-enter {
  opacity:0;
  left:100px;
  width:100%;
  position:absolute;
}
.view-enter.view-enter-active {
  left:0;
  opacity:1;
}

.view-leave {
  position:absolute;
  left:0;
  width:100%;
  opacity:1;
}
.view-leave.view-leave-active {
  left:-100px;
  opacity:0;
}

but i want a other element that is already present in the dom animated to.

How should i do that? I want to use jQuery to directly adress that other element. Should i use a custom directive?

Upvotes: 3

Views: 247

Answers (1)

Simon
Simon

Reputation: 1879

If I understand the documentation correctly you should be able to hook into the events. Try something like this in your JS;

$(document).on('view-enter', function(){
    alert('view-enter triggered');
    // Animation
    $('#some-element').addClass('view-enter');
});

This isn't necessarily the best way of doing this, but at least it might help give you some insight for how to proceed.

Upvotes: 1

Related Questions