Use CSS animations for fading in.
This commit is contained in:
parent
0d542cee8c
commit
96d311e2e9
@ -1091,7 +1091,33 @@
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
clear: both; }
|
||||
@keyframes fadein {
|
||||
0% {
|
||||
opacity: 0; }
|
||||
100% {
|
||||
opacity: 1; } }
|
||||
@-webkit-keyframes fadein {
|
||||
0% {
|
||||
font-size: 0; }
|
||||
100% {
|
||||
font-size: 40px; } }
|
||||
#conversejs .visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-animation-name: fadein;
|
||||
-moz-animation-name: fadein;
|
||||
animation-name: fadein;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 350ms;
|
||||
-moz-animation-duration: 350ms;
|
||||
animation-duration: 350ms;
|
||||
-webkit-animation-timing-function: ease;
|
||||
-moz-animation-timing-function: ease;
|
||||
animation-timing-function: ease; }
|
||||
#conversejs .hidden {
|
||||
opacity: 0;
|
||||
display: none; }
|
||||
#conversejs .locked {
|
||||
padding-right: 22px; }
|
||||
|
@ -49,9 +49,29 @@
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
}
|
||||
@-webkit-keyframes fadein {
|
||||
0% { font-size: 0 }
|
||||
100% { font-size: 40px }
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
@include animation-name(fadein);
|
||||
@include animation-fill-mode(forwards);
|
||||
@include animation-duration(350ms);
|
||||
@include animation-timing-function(ease);
|
||||
}
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.locked {
|
||||
padding-right: 22px;
|
||||
}
|
||||
|
21
src/utils.js
21
src/utils.js
@ -217,23 +217,12 @@
|
||||
callback();
|
||||
return;
|
||||
}
|
||||
el.style.opacity = 0;
|
||||
el.addEventListener("animationend", function () {
|
||||
el.classList.remove('visible');
|
||||
callback();
|
||||
}, false);
|
||||
el.classList.add('visible');
|
||||
el.classList.remove('hidden');
|
||||
var last = +new Date();
|
||||
var tick = function() {
|
||||
el.style.opacity = +el.style.opacity + (new Date() - last) / 100;
|
||||
last = +new Date();
|
||||
if (+el.style.opacity < 1) {
|
||||
if (!_.isUndefined(window.requestAnimationFrame)) {
|
||||
window.requestAnimationFrame(tick);
|
||||
} else {
|
||||
window.setTimeout(tick, 16);
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
tick();
|
||||
},
|
||||
|
||||
isOTRMessage: function (message) {
|
||||
|
Loading…
Reference in New Issue
Block a user