Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm trying to write a directive to move an element from one position on screen to another on click, using a CSS transition, where the position is determined by Javascript / attribute on the element, and not known ahead of time in the pre-written CSS. Also, I need a callback, to a function in the $scope, done at the end of the transition, which is specified in a custom attribute. So the element looks like

<button move-me="100" move-me-after="afterMove()">Move Me!</button>

In order to use $animate for this, in my custom directive moveMe, on click I dynamically add a style block to the page

<style> .move-me-1 {....}</style>

and then use

$animate.addClass(iElement, 'move-me-1', function() { ... });

to handle the animation and the callback once it's finished. An example plunkr is available at

http://plnkr.co/edit/XRMRO93vl248Ve02Jnpo?p=preview

This seems overly complicated: adding style tags to the page seems quite convoluted. I'm doing this so the transition itself can be specified in an external style sheet, in terms of the run time, and the timing function, and using $animate.addClass so Angular can then determine the correct time to fire the callback.

Is there a simpler/better way of achieving what I want?

This example is simplified to my actual use case. In my case the element animated is created in the directive, and removed at the end, and is purely a temporary visual aid. In addition to position, height + width are also dynamically determined for both the start and final style of the element, using a CSS transition between the states. Each of the styles can have a different transition time + timing function to achieve the effect I'm after. Multiple elements can be moved to / from different positions at the same time, so the JS/CSS must allow that.

share|improve this question
add comment

1 Answer

up vote 2 down vote

sounds like you need more than just angular for complex animations, these use jquery to overwrite angular's $animate for a given class

http://thiswildorchid.com/custom-angularjs-animations-with-jquery-how-to

another example

EDIT:

You should be able to specify any non-dynamic rules and transition using pure css. e.g.

.animate-enter {
   -webkit-transition: 1s linear all; /* Chrome */
   transition: 1s linear all;
   opacity: 0;
}

.animate-enter.animate-enter-active {
   opacity: 1;
}
share|improve this answer
 
I would like to use CSS animations/transitions, rather than JS-based ones. Only the target style comes from JS. Is this still possible using the myModule.animation('.myAnimation',... method? –  Michal Charemza Dec 4 '13 at 11:54
 
you can specify the transition to use in css, but if you say height+ width etc are dynamicaly calulated, you will need to use javascript –  Eru Dec 4 '13 at 12:06
 
I'm happy using some Javascript, as per my plunkr. Just I'm wanting the transition itself to be CSS, and not Javascript, for efficiency/speed reasons, and to keep the style (such as details of the transition) separate from the behaviour (in Javascript) where possible. –  Michal Charemza Dec 4 '13 at 14:35
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.