Use CSS animations for fading in.
This commit is contained in:
parent
0d542cee8c
commit
96d311e2e9
@ -1091,7 +1091,33 @@
|
|||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
clear: both; }
|
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 {
|
#conversejs .hidden {
|
||||||
|
opacity: 0;
|
||||||
display: none; }
|
display: none; }
|
||||||
#conversejs .locked {
|
#conversejs .locked {
|
||||||
padding-right: 22px; }
|
padding-right: 22px; }
|
||||||
|
@ -49,9 +49,29 @@
|
|||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
clear: both;
|
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 {
|
.hidden {
|
||||||
|
opacity: 0;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.locked {
|
.locked {
|
||||||
padding-right: 22px;
|
padding-right: 22px;
|
||||||
}
|
}
|
||||||
|
21
src/utils.js
21
src/utils.js
@ -217,23 +217,12 @@
|
|||||||
callback();
|
callback();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
el.style.opacity = 0;
|
el.addEventListener("animationend", function () {
|
||||||
|
el.classList.remove('visible');
|
||||||
|
callback();
|
||||||
|
}, false);
|
||||||
|
el.classList.add('visible');
|
||||||
el.classList.remove('hidden');
|
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) {
|
isOTRMessage: function (message) {
|
||||||
|
Loading…
Reference in New Issue
Block a user