listening to css3 transition events in angularjs

1,450 views
Skip to first unread message

Jake K.

unread,
Feb 24, 2014, 8:18:36 PM2/24/14
to ang...@googlegroups.com
Hello

How can I listen to CSS3 transition events in angularjs?

So far I've tried with $rootScope.$on but it's not working.

Thanks

Ryan Johnston

unread,
Feb 25, 2014, 12:10:15 AM2/25/14
to ang...@googlegroups.com
https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L1321 I'll let you learn / figure out the rest. ngAnimate's source code will give you some great insights and teachings :)

Luke Kende

unread,
Feb 25, 2014, 2:18:28 AM2/25/14
to ang...@googlegroups.com
You can create a directive to do this and add it to the body tag if you want just one catch for any 'transitionend" event.  Event handling in Angular and say jQuery are very different systems, so the $on events are only for built-in angular events or where you $broadcast or $emit an event purposely.

<body catch-transitions>
 <!-- your html -->
</body>

angular.module('myApp', []).directive('catchTransitions', function(){
  link: function(scope,element){
   
    //if you included jquery, now you can do typical stuff with it

    $(element).bind('transitionend', function(e){ //be aware of other event names from other browsers vendor-prefixed

       console.log(''got a css transition event", e)

    })
})

Luke Kende

unread,
Feb 25, 2014, 2:20:20 AM2/25/14
to ang...@googlegroups.com
My syntax was a little wrong for the example directive:

angular.module('myApp', []).directive('catchTransitions', function(){
  return{
    link: function(scope,element){
   
      //if you included jquery, now you can do typical stuff with it

      $(element).bind('transitionend', function(e){ //be aware of other event names from other browsers vendor-prefixed

         console.log(''got a css transition event", e)

      })
    }
})


Sander Elias

unread,
Feb 25, 2014, 2:36:25 AM2/25/14
to ang...@googlegroups.com

Hi Luke,

You don’t need jquery at all for this. And in a directive you have the element available, in a pre wrapped state.
like this:

angular.module('myApp', []).directive('catchTransitions', function(){
  return{
    link: function(scope,element){
      element.on('transitionend', function(e){ //be aware of other event names from other browsers vendor-prefixed
         console.log(''got a css transition event", e)
      })
    }
})

I prefer to use jquery as least as possible. Nowadays I seldom include it in my projects.

Regards
Sander

Jake K.

unread,
Feb 25, 2014, 2:57:42 AM2/25/14
to ang...@googlegroups.com
Thanks to all of you.

I will use Sander Elias' solution for the sake of simplicity.

Btw ( to Sander Elias ) I still remember the plunker you asked me to do a while ago. The one on ng-repeat. Have you had a look at it? 
I'm still waiting for your feedback and hopefully I will be able to rewrite my code in a better way.

Thanks


--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/iHzCYjUfKww/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.



--
JAKE KWON +1 (604) 655 3109
email: jyk...@gmail.com

Sander Elias

unread,
Feb 25, 2014, 3:54:45 AM2/25/14
to ang...@googlegroups.com
Jake,

Euhm, can you point me to the question again? ;)

Regards
Sander
Message has been deleted

Titus Okathe

unread,
Mar 27, 2015, 3:25:32 PM3/27/15
to ang...@googlegroups.com
Luke's way is still the way to go if you're listening for custom events like those generated by bootstrap components e.g. 'show.bs.collapse'
Reply all
Reply to author
Forward
0 new messages