github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-12-04 08:13:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add pulsate/flash animations for drawing attention to posts

Browse Source
This commit is contained in:
Toby Zerner 2015-05-14 22:33:27 +09:30
parent c35721d286
commit a77303a473
2 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
framework/core/js/forum/src/components/stream-content.js
View File

@ -179,16 +179,33 @@ export default class StreamContent extends mixin(Component, evented) {
scrollToItem($item, noAnimation) { scrollToItem($item, noAnimation) {
var $container = $('html, body').stop(true); var $container = $('html, body').stop(true);
if ($item.length) { if ($item.length) {
var scrollTop = $item.is(':first-child') ? 0 : $item.offset().top - this.getMarginTop(); var itemTop = $item.offset().top - this.getMarginTop();
if (noAnimation) { var itemBottom = itemTop + $item.height();
$container.scrollTop(scrollTop); var scrollTop = $(document).scrollTop();
} else if (scrollTop !== $(document).scrollTop()) { var scrollBottom = scrollTop + $(window).height();
$container.animate({scrollTop: scrollTop}, 'fast');
// If the item is already in the viewport, just flash it, we don't need to
// scroll anywhere.
if (itemTop > scrollTop && itemBottom < scrollBottom) {
this.flashItem($item);
} else {
var scrollTop = $item.is(':first-child') ? 0 : itemTop;
if (noAnimation) {
$container.scrollTop(scrollTop);
} else if (scrollTop !== $(document).scrollTop()) {
$container.animate({scrollTop: scrollTop}, 'fast', this.flashItem.bind(this, $item));
} else {
this.flashItem($item);
}
} }
} }
return $container.promise(); return $container.promise();
} }
flashItem($item) {
$item.addClass('flash').one('animationend webkitAnimationEnd', () => $item.removeClass('flash'));
}
/** /**
Find the DOM element of the item that is nearest to a post with a certain Find the DOM element of the item that is nearest to a post with a certain
number. This will either be another post (if the requested post doesn't number. This will either be another post (if the requested post doesn't

12
framework/core/less/forum/discussion.less
View File

@ -166,6 +166,18 @@
background: @fl-primary-color; background: @fl-primary-color;
} }
} }
@-webkit-keyframes pulsate {
0% {transform: scale(1)}
50% {transform: scale(1.02)}
100% {transform: scale(1)}
}
.item.pulsate {
-webkit-animation: pulsate 1s ease-in-out;
-webkit-animation-iteration-count: infinite;
}
.item.flash {
-webkit-animation: pulsate 0.2s ease-in-out;
-webkit-animation-iteration-count: 1;
} }
.post-header { .post-header {
margin-bottom: 10px; margin-bottom: 10px;