alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 🐛 Fixed the comment component animation style.

Browse Source
This commit is contained in:
凡梦星尘 2022-06-20 16:07:50 +08:00
parent 8948151b05
commit 26f36810c9
6 changed files with 72 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
static/css/hover.css → assets/css/_common/scaffolding/animation/hover.scss
View File

2
assets/css/_common/scaffolding/animation/index.scss Normal file
View File

@ -0,0 +1,2 @@
@import 'show';
@import 'hover';

65
assets/css/_common/scaffolding/animation/show.scss Normal file
View File

@ -0,0 +1,65 @@
// tabshow animation
@-moz-keyframes tabshow {
0% {
-webkit-transform: translateY(15px);
-moz-transform: translateY(15px);
-o-transform: translateY(15px);
-ms-transform: translateY(15px);
transform: translateY(15px);
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes tabshow {
0% {
-webkit-transform: translateY(15px);
-moz-transform: translateY(15px);
-o-transform: translateY(15px);
-ms-transform: translateY(15px);
transform: translateY(15px);
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-o-keyframes tabshow {
0% {
-webkit-transform: translateY(15px);
-moz-transform: translateY(15px);
-o-transform: translateY(15px);
-ms-transform: translateY(15px);
transform: translateY(15px);
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes tabshow {
0% {
-webkit-transform: translateY(15px);
-moz-transform: translateY(15px);
-o-transform: translateY(15px);
-ms-transform: translateY(15px);
transform: translateY(15px);
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}

1
assets/css/_common/scaffolding/index.scss
View File

@ -11,3 +11,4 @@
@import 'pagination'; @import 'pagination';
@import 'comments'; @import 'comments';
@import 'fontawesome'; @import 'fontawesome';
@import 'animation';

9
assets/js/utils.js
View File

@ -258,12 +258,11 @@ NexT.utils = {
const comms = document.querySelectorAll('.comment-wrap > div'); const comms = document.querySelectorAll('.comment-wrap > div');
button.addEventListener('click', () => { button.addEventListener('click', () => {
button.classList.toggle('move'); button.classList.toggle('move');
comms.forEach(function(item){ comms.forEach(function(item){
item.style.display = item.style.display === 'none' ? 'block' : 'none'; if (item.style.display === 'none') {
if (item.style.display === 'block') { item.style.cssText = "display: block; animation: tabshow .8s";
item.style.animation = "0.8s ease 0s 1 normal none running tabshow";
} else { } else {
item.style.removeProperty('animation'); item.style.cssText = "display: none;"
} }
}); });
}); });

1
layouts/partials/head/style.html
View File

@ -22,7 +22,6 @@
{{- $scss = $scss | resources.ExecuteAsTemplate "main.scss" . }} {{- $scss = $scss | resources.ExecuteAsTemplate "main.scss" . }}
{{- $css := $scss | toCSS (dict "targetPath" "/css/main.css" "outputStyle" "expanded") }} {{- $css := $scss | toCSS (dict "targetPath" "/css/main.css" "outputStyle" "expanded") }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}"> <link rel="stylesheet" href="{{ $css.RelPermalink }}">
<link rel="stylesheet" href="/css/hover.css">
{{- if .IsPage }} {{- if .IsPage }}
<style type="text/css"> <style type="text/css">
.post-footer hr:after { .post-footer hr:after {