私は成功せずにいくつかの設定をしたいトースターを持っています。まず第一に、ここのように速く表示したいです:
http://codeseven.github.io/toastr/demo.html
しかし、それを行うオプションが見つかりません。ここのように非常に遅いです:
http://plnkr.co/edit/mVR4P4?p=preview
第二に、前者のようにぼやけないで、後者のようにしたい(不透明度なし)、
それ、どうやったら出来るの?
css で設定できます。ここを参照してください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
}
サンプル CSS コード:
/*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;
}