Added fade effect to page content highlighting

Closes #314

diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js
index cc6296434ee41c78db8494cd9e6d86338c30e67a..4a4724b851409ec520be88ab184621fe95135a3a 100644 (file)
--- a/resources/assets/js/pages/page-show.js
+++ b/resources/assets/js/pages/page-show.js
@@ -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();
             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();
         }
         } else {
             $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
         }

diff --git a/resources/assets/sass/_animations.scss b/resources/assets/sass/_animations.scss
index afcf01cffb2a030591f583e4dcb13774c06b61ee..467399a660e90b0ccc12ade8422c7e09c5d7a4a3 100644 (file)
--- a/resources/assets/sass/_animations.scss
+++ b/resources/assets/sass/_animations.scss
@@ -126,4 +126,8 @@
   animation-duration: 180ms;
   animation-delay: 0s;
   animation-timing-function: cubic-bezier(.62, .28, .23, .99);
   animation-duration: 180ms;
   animation-delay: 0s;
   animation-timing-function: cubic-bezier(.62, .28, .23, .99);

+}
+
+.anim.selectFade {
+  transition: background-color ease-in-out 3000ms;

 }
\ No newline at end of file
 }
\ No newline at end of file