Added fade effect to page content highlighting

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

View File

@ -81,6 +81,12 @@ let setupPageShow = window.setupPageShow = function (pageId) {
let $idElem = $(idElem);
let color = $('#custom-styles').attr('data-color-light');
$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 {
$('.page-content').find(':contains("' + text + '")').smoothScrollTo();
}

View File

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