AngularJS选项的烤面包机，如何

Question

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?

Answer 1

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;
}