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
Download Patch File Download Diff File Expand all files Collapse all files

176
assets/css/_common/scaffolding/animation/hover.scss Normal file
View File

@@ -0,0 +1,176 @@
/** Animation for link hover style */
@keyframes wobble-vertical {
16.65% {
transform: translateX(8px);
}
33.3% {
transform: translateX(-6px);
}
49.95% {
transform: translateX(4px);
}
66.6% {
transform: translateX(-2px);
}
83.25% {
transform: translateX(1px);
}
100% {
transform: translateX(0);
}
}
/* Icon Pulse */
@-webkit-keyframes hvr-icon-pulse {
25% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
@keyframes hvr-icon-pulse {
25% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
.hvr-icon-pulse {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-icon-pulse .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon {
-webkit-animation-name: hvr-icon-pulse;
animation-name: hvr-icon-pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* Bounce To Right */
.hvr-bounce-to-right {
background: var(--btn-default-bg);
border: 2px solid var(--btn-default-border-color);
border-radius: 2px;
color: var(--btn-default-color);
display: inline-block;
font-size: 0.875em;
line-height: 2;
padding: 0 20px;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.hvr-bounce-to-right:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--btn-default-hover-bg);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
background: var(--btn-default-bg);
border-color: var(--btn-default-hover-border-color);
color: var(--btn-default-hover-color);
}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal {
background: var(--btn-default-bg);
border: 2px solid var(--btn-default-border-color);
border-radius: 2px;
color: var(--btn-default-color);
display: inline-block;
font-size: 0.875em;
line-height: 2;
padding: 0 20px;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-shutter-out-horizontal:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: var(--btn-default-hover-bg);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
background: var(--btn-default-bg);
border-color: var(--btn-default-hover-border-color);
color: var(--btn-default-hover-color);
}
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

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 'comments';
@import 'fontawesome';
@import 'animation';

9
assets/js/utils.js
View File

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