Use CSS3 animation

This commit is contained in:
Mimi 2019-12-29 19:40:35 +08:00
parent 4c784e6546
commit 12c9e85acd
2 changed files with 6 additions and 5 deletions

View File

@ -19,7 +19,7 @@ function loadWidget(waifuPath, apiPath) {
<span class="fa fa-lg fa-times"></span> <span class="fa fa-lg fa-times"></span>
</div> </div>
</div>`); </div>`);
$("#waifu").show().animate({ bottom: 0 }, 3000); $("#waifu").show().css({ bottom: 0 });
function registerEventListener() { function registerEventListener() {
document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto); document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto);
@ -46,10 +46,11 @@ function loadWidget(waifuPath, apiPath) {
document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => { document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => {
localStorage.setItem("waifu-display", Date.now()); localStorage.setItem("waifu-display", Date.now());
showMessage("愿你有一天能与重要的人重逢。", 2000, 11); showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
$("#waifu").animate({ bottom: -500 }, 3000, () => { $("#waifu").css({ bottom: -500 });
setTimeout(() => {
$("#waifu").hide(); $("#waifu").hide();
$("#waifu-toggle").show().animate({ "margin-left": -50 }, 1000); $("#waifu-toggle").show().animate({ "margin-left": -50 }, 1000);
}); }, 3000);
}); });
var devtools = () => {}; var devtools = () => {};
console.log("%c", devtools); console.log("%c", devtools);
@ -235,7 +236,7 @@ function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
$("#waifu-toggle").attr("first-time", false); $("#waifu-toggle").attr("first-time", false);
} else { } else {
localStorage.removeItem("waifu-display"); localStorage.removeItem("waifu-display");
$("#waifu").show().animate({ bottom: 0 }, 3000); $("#waifu").show().css({ bottom: 0 });
} }
}); });
if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 86400000) { if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 86400000) {

View File

@ -18,7 +18,7 @@
line-height: 0; line-height: 0;
position: fixed; position: fixed;
transform: translateY(3px); transform: translateY(3px);
transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, bottom 3s ease-in-out;
z-index: 1; z-index: 1;
} }