From 1a09d88891e646de0610de0d75edb8752ae85bc3 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 16 Apr 2017 16:46:55 +0100
Subject: [PATCH] Added fade effect to page content highlighting

Closes #314
---
 resources/assets/js/pages/page-show.js | 6 ++++++
 resources/assets/sass/_animations.scss | 4 ++++
 2 files changed, 10 insertions(+)

diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js
index cc6296434..4a4724b85 100644
--- 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();
+            setTimeout(() => {
+                $idElem.addClass('anim').addClass('selectFade').css('background-color', '');
+                setTimeout(() => {
+                   $idElem.removeClass('selectFade');
+                }, 3000);
+            }, 100);
         } else {
             $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
         }
diff --git a/resources/assets/sass/_animations.scss b/resources/assets/sass/_animations.scss
index afcf01cff..467399a66 100644
--- 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);
+}
+
+.anim.selectFade {
+  transition: background-color ease-in-out 3000ms;
 }
\ No newline at end of file