Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible to make it work with animate.css? #10

Open
arashb31 opened this issue Jan 14, 2016 · 3 comments
Open

Possible to make it work with animate.css? #10

arashb31 opened this issue Jan 14, 2016 · 3 comments

Comments

@arashb31
Copy link

Any way of adding animations to the toast appearing/disappearing (like Android)?

Maybe add some classes for it to work with animate.css

@anjumnawab
Copy link

Hey @arashb31 you can archive this by doing some minor tweaks to ionic-toast.js line number 57

toastScope.hide = function () { toastScope.ionicToast.toastClass = 'ionic_toast_top ionic_toast_sticky animated fadeOutDown'; };

and line number 70

angular.extend(toastScope.ionicToast, { toastClass: toastPosition[position] + ' ' + (closeBtn ? 'ionic_toast_sticky animated fadeInDown' : ''), toastMessage: message });

You also need to have animate.css file from https://daneden.github.io/animate.css/

Hope this help :)

@arashb31
Copy link
Author

arashb31 commented Apr 9, 2016

Great that works!. How about adding an optional parameter on the toast.show to add any optional classes/IDs?

eg.

var classes = { 
 openID: "myID", 
 openClass: "animated fadeInLeft",
 closeClass : "animated fadeOutRight"
}

  ionicToast.show('This is a toast at the top.', 'top', true, 2500, classes);

@Arxi
Copy link

Arxi commented May 10, 2016

+1 for optional parameter for adding classes

great work, by the way!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants