webapp/bookstack
webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-25 14:42:44 +03:00
Code

Added fade effect to page content highlighting

Browse Source 
Closes #314
This commit is contained in:
Dan Brown 2017-04-16 16:46:55 +01:00
parent 46c01ecba2
commit 1a09d88891
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/assets/js/pages/page-show.js
View File

@ -81,6 +81,12 @@ let setupPageShow = window.setupPageShow = function (pageId) {
let $idElem = $(idElem); let $idElem = $(idElem);
let color = $('#custom-styles').attr('data-color-light'); let color = $('#custom-styles').attr('data-color-light');
$idElem.css('background-color', color).attr('data-highlighted', 'true').smoothScrollTo(); $idElem.css('background-color', color).attr('data-highlighted', 'true').smoothScrollTo();
setTimeout(() => {
$idElem.addClass('anim').addClass('selectFade').css('background-color', '');
setTimeout(() => {
$idElem.removeClass('selectFade');
}, 3000);
}, 100);
} else { } else {
$('.page-content').find(':contains("' + text + '")').smoothScrollTo(); $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
} }

4
resources/assets/sass/_animations.scss
View File

@ -127,3 +127,7 @@
animation-delay: 0s; animation-delay: 0s;
animation-timing-function: cubic-bezier(.62, .28, .23, .99); animation-timing-function: cubic-bezier(.62, .28, .23, .99);
} }
.anim.selectFade {
transition: background-color ease-in-out 3000ms;
}