lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: add animation when opening search popover

This commit is contained in:
XPoet 2020-12-30 20:09:46 +08:00
parent fd2c99910a
commit 4cdbdd11b4
2 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
source/css/layout/_partial/local-search.styl
View File

@ -1,26 +1,37 @@
$icon-size = 1.2rem; $icon-size = 1.2rem;
.search-pop-overlay { .search-pop-overlay {
display: none;
position: fixed; position: fixed;
left: 0; display: flex;
top: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: rgba(0, 0, 0, 0.4); left: 0;
top: 0;
background: rgba(0, 0, 0, 0);
visibility: hidden;
z-index: $z-index-8; z-index: $z-index-8;
transition();
&.active {
background: rgba(0, 0, 0, 0.38);
visibility: visible;
.search-popup {
transform: scale(1);
}
}
.search-popup { .search-popup {
background: var(--background-color); background: var(--background-color);
border-radius: 2px; border-radius: 5px;
height: 80%; height: 80%;
left: 50%;
transform: translateX(-50%);
position: fixed;
top: 10%;
width: 70%; width: 70%;
margin: auto;
transform: scale(0);
z-index: $z-index-6; z-index: $z-index-6;
transition();
+keep-tablet() { +keep-tablet() {
width: 80%; width: 80%;

6
source/js/local-search.js
View File

@ -249,8 +249,8 @@ KEEP.initLocalSearch = () => {
document.querySelectorAll('.search-popup-trigger').forEach(element => { document.querySelectorAll('.search-popup-trigger').forEach(element => {
element.addEventListener('click', () => { element.addEventListener('click', () => {
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
document.querySelector('.search-pop-overlay').style.display = 'block'; document.querySelector('.search-pop-overlay').classList.add('active');
searchInputDom.focus(); setTimeout(() => searchInputDom.focus(), 500);
if (!isfetched) fetchData(); if (!isfetched) fetchData();
}); });
}); });
@ -258,7 +258,7 @@ KEEP.initLocalSearch = () => {
// Monitor main search box // Monitor main search box
const onPopupClose = () => { const onPopupClose = () => {
document.body.style.overflow = ''; document.body.style.overflow = '';
document.querySelector('.search-pop-overlay').style.display = ''; document.querySelector('.search-pop-overlay').classList.remove('active');
}; };
document.querySelector('.search-pop-overlay').addEventListener('click', event => { document.querySelector('.search-pop-overlay').addEventListener('click', event => {