I have a toaster which i would like to do several configs on it without success, first of all, i want to show it fast like in here: (show duration?)
http://codeseven.github.io/toastr/demo.html
But i don't find the option that will do that, it's very slow like in here:
http://plnkr.co/edit/mVR4P4?p=preview
second of all, i want it not to be blury like the former, but i want it to be like the latter (no opacity),
How do i do that?
You can set that in css please see here http://plnkr.co/edit/63eCUz?p=preview
Q1:
transition: 100ms <- just adjust transaction duration
Q2:
.animateToaster-enter.animateToaster-enter-active,
.animateToaster-leave {
opacity: 1; <-set that to 1 instead of 0.8
}
Sample CSS Code:
/*Animation CSS3*/
.animateToaster-enter,
.animateToaster-leave
{
-webkit-transition: 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.animateToaster-enter.animateToaster-enter-active,
.animateToaster-leave {
opacity: 1;
}
.animateToaster-leave.animateToaster-leave-active,
.animateToaster-enter {
opacity: 0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.