https://github.com/minipai/ng-trans.css

Easy transitions for AngularJS
https://github.com/minipai/ng-trans.css

Last synced: 4 months ago
JSON representation

Easy transitions for AngularJS

• Host: GitHub
• URL: https://github.com/minipai/ng-trans.css
• Owner: minipai
• License: mit
• Created: 2013-09-17T05:32:11.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2016-03-27T14:58:09.000Z (over 8 years ago)
• Last Synced: 2024-08-04T15:04:18.480Z (4 months ago)
• Language: CSS
• Homepage: http://minipai.github.io/ng-trans.css/
• Size: 456 KB
• Stars: 92
• Watchers: 5
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
*No longer in active development. Suggest https://github.com/nozzle/nzAnimate/ that have more feature*

ng-trans.css

============

ng-trans.css is some transitions made for AngularJS.

To see demo, check out http://minipai.github.io/ng-trans.css/

##Requirements

You need AngularJS 1.2 with ngAnimate.

ng-trans.css works with directives that will add `.ng-leave`, `.ng-leave-active`, `.ng-enter` and `.ng-enter-active` CSS classes. This includes ngRepeat, ngInclude, ngIf, ngView.

##Usage

You only need to add class `ng-trans ng-trans-{{transType}} {{timingFuntion}}` to the element to make transition work.

```



  




```


**Before v0.5.0 class needed to add to parent element. However, its changed to enable doing more fancy stuffs.**

## Builds

- **ng-trans.css** contains all transitions and timing functions.

- **ng-trans-transitions.css** contains all transitions.

- **ng-trans-timing-function.css** contains all timing functions.

## List of transitions ({{transType}})

- fade, fade-left, fade-up, fade-right, fade-down

- slide-up, slide-up, slide-right, slide-down

- scale-up, scale-down

- flip-x, flip-y

- rotate

## List of timing functions ({{timingFuntion}})

- easeInQuad, easeInCubic, easeInQuart, easeInQuint, easeInSine

- easeInExpo, easeInCirc, easeInQuad, easeInBack

- easeOutQuad, easeOutCubic, easeOutQuart, easeOutQuint, easeOutSine

- easeOutExpo, easeOutCirc, easeOutQuad, easeOutBack

- easeInOutCubic, easeInOutQuart, easeInOutQuint, easeInOutSine

- easeInOutExpo, easeInOutCirc, easeInOutQuad, easeInOutBack

Timing funtions thanks to http://matthewlein.com/ceaser/