Using ionic framework javascript and animations without using controllers


#1

Hi,

I would like to implement the ionic look & feel in my app but without using angular and the controllers. I see how I can do that using only the css. I have no problem attaching events and ajax loading my self for pages. my question is, is there a way to have the nice looking transitions and animations without using the controllers?

Thanks


#2

+1
i’m interested too.


#3

All of the animations are inside the CSS (for now). Most of the Ionic code is based on CSS transitions. However, they are pretty tied with Angular as Angular applies the transition classes to the view when told to do so via the core Ionic JS.

Examples :

.ng-animate .scroll-bar {
  visibility: hidden; }

.menu-animated {
  -webkit-transition: -webkit-transform 200ms ease;
  -moz-transition: -moz-transform 200ms ease;
  transition: transform 200ms ease; }

.ng-animate .pane {
  position: absolute; }

.action-sheet-backdrop {
  -webkit-transition: background-color 300ms ease-in-out;
  -moz-transition: background-color 300ms ease-in-out;
  transition: background-color 300ms ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); }
  .action-sheet-backdrop.active {
    background-color: rgba(0, 0, 0, 0.5); }

You’ll have to dig through the CSS to figure out what animations exist and how to apply them.