fade transition directive

[joshkurz]

I threw together a fade directive that is based off of the collapse directive @petebacondarwin wrote.
Seems to work pretty nicely. What do you guys think?
http://plnkr.co/edit/VHLhJ6?p=preview

[petebacondarwin]

Cool. I simplified the demo side of things, as I was a bit confused
initially by the accordion classes.
http://plnkr.co/edit/rwfVZF?p=preview
I wonder if we should actually have a more generic visibility directive
(rather than fade, collapsible, etc)?
Pete

On 9 January 2013 11:28, Josh Kurz notifications@github.com wrote:

I threw together a fade directive that is based off of the collapse
directive @petebacondarwin https://github.com/petebacondarwin wrote.
Seems to work pretty nicely. What do you guys think?
http://plnkr.co/edit/VHLhJ6?p=preview

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/59.

[joshkurz]

I think that is a good idea. The fade directive is very simple in comparison to collapse, meaning that the logic only needs to be deluded for the correct functionality. We could have a directive that looks for the name of the transition requested and then implements that specific transition on any given element. It might be nicer than having a bunch of specific transition modules that need to be added into the ui-bootstrap module.

something like div ui-transition="fade" trigger="isFaded"

[ajoslin]

Sounds cool. It would be a lot more useful if it let people hook events onto transitions being done too.

I also don't like the trigger attribute name. Doesn't seem to quite make sense to me. Maybe model or do?

Something like:

<div transition="fade" do="shouldDo" on-done="onDone()"></div>

And do could default to true, so you could just put transition on any element to just have it transition in on start.

[joshkurz]

Here is a plunk http://plnkr.co/edit/UnWm93?p=preview that has both fade and collapse in a transitions.js file. I made do doIt because do is reserved and was throwing a warning.

Adding the on-done attribute is a great idea. I did this with an eval on the attribute name followed by a digest call. I think this is the correct way to accomplish this.

added a variable that checks if it is the first time the fade directive is loaded, to make sure the event is not fired if it is actually the first load.

[ajoslin]

Thinking more, I dunno if this directive really belongs here or more in angular-ui main. Since we're supposed to just be bootstrap.

[joshkurz]

I agree Andy.
It would be the first angular-ui directive with an angular-bootstrap file as a dependency.

The directive must have left and right transitions as well.
In all reality would the transitions directive fit in angular-ui?

[ajoslin]

I would be more inclined to just make a tiny directive out of $transition which takes an input as trigger (string, fn, or object) and calls an expression on done. It would re-trigger the transition whenever attrs.transition changes.

The directive would be about 20-30 lines that way, versus having to add in presets and lots of code (collapse, fade, presets).

<div transition="'myClass'" on-done="myExpr()"></div>

<div transition="{height: '20px'}" on-done="doThis()"></div>

<div transition="{height: shown && '30px' || '0px'}" on-done="finished()"></div>

And about angular-ui main and bootstrap needing to share things... this seems to be happening more and more. Idk

[joshkurz]

sweet idea

[joshkurz]

So if we are going to be adding in the specific transition directives to the bootstrap repo, then shouldn't they all fall into one master directive?

[pkozlowski-opensource]

@petebacondarwin @ajoslin @joshkurz I'm still not up to sped with all those transitions directives and services. We've got the $transition service that supports bootstrap directives. Should we provide a lightweight directive on top of this as @ajoslin suggests? Or just work on those topics in the main angular-ui repo?

[pkozlowski-opensource]

The discussion wasn't very conclusive so far so going to close this issue. Let's reopen it if needed.

[joshkurz]

ok thats fine. I had reopened this issue, because the collapse directive was merged. I figured that if we are going to add collapse then something could be done about all other transition effects that are needed.

I would also like to see the directive @ajoslin is proposing. Sounds very interesting.