Refactor `motion` & sidebar affix global fix. #1829

ivan-nginx · 2017-08-27T02:21:14Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines.
Tests for the changes have been added (for bug fixes / features).
Docs have been added / updated (for bug fixes / features).

PR Type

What kind of change does this PR introduce?

What is the current behavior?

Sidebar affix don't work globally (block extra was wrong usage).
Issue Number(s): “分类”“标签”“关于”页面中正文部分没有动画 #967.

What is the new behavior?

Sidebar affix now must work globally.
Now motion option have more options:
- Breaking changes: rename use_motion to motion in main NexT config.
- Option to async loading. That's mean effects on logo, menu, post will load in same time if true; if false — this items will load after each other.
- Motion effects now work for all pages (“分类”“标签”“关于”页面中正文部分没有动画 #967) and tags/category headers too.
- Transition variants (see config comments).

In NexT _config.yml:

-# Motion
-use_motion: true

# Use velocity to animate everything.
motion:
  enable: true
  async: false
  transition:
    # Transition variants:
    # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
    # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
    # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
    # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
    # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
    # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
    post_block: fadeIn
    post_header: slideDownIn
    post_body: slideDownIn
    coll_header: slideLeftIn

P.S. U can comment any of 4 elements if u don't want to use effects on they.
E.g. comment post_block: fadeIn — will not add motion effects to blocks on all posts.

Screens with this changes: N/A
Link to demo site with this changes: N/A

Does this PR introduce a breaking change?

Yes.
No.

Update from original.

1. Remove `use_motion` condition [block script extra]. 2. Remove `post-details.swig` [block script extra] (for sidebar affix global fix). 3. Remove `motion-element` from swig because was added to external js (disable motion state fix). 4. Add `seo` condition on archive header.

1. Refactor motion effect option. 2. Global fix sidebar affix on all posts and pages [block script_extra].

houndci-bot · 2017-08-27T02:21:24Z

source/js/src/motion.js

+        if (CONFIG.motion.transition.post_body) {
+          $postBody.velocity('transition.' + $postBodyTransition, postMotionOptions);
+        }
+        if (CONFIG.motion.transition.coll_header) {


Identifier 'coll_header' is not in camel case.

houndci-bot · 2017-08-27T02:21:24Z

source/js/src/motion.js

+        if (CONFIG.motion.transition.post_header) {
+          $postHeader.velocity('transition.' + $postHeaderTransition, postMotionOptions);
+        }
+        if (CONFIG.motion.transition.post_body) {


Identifier 'post_body' is not in camel case.

houndci-bot · 2017-08-27T02:21:24Z

source/js/src/motion.js

+        if (CONFIG.motion.transition.post_block) {
+          $postBlock.velocity('transition.' + $postBlockTransition, postMotionOptions);
+        }
+        if (CONFIG.motion.transition.post_header) {


Identifier 'post_header' is not in camel case.

houndci-bot · 2017-08-27T02:21:24Z

source/js/src/motion.js

@@ -293,7 +314,19 @@ $(document).ready(function () {
          integrator.next();
        };

-        $post.velocity('transition.slideDownIn', postMotionOptions);
+        //$post.velocity('transition.slideDownIn', postMotionOptions);
+        if (CONFIG.motion.transition.post_block) {


Identifier 'post_block' is not in camel case.

houndci-bot · 2017-08-27T02:21:24Z

source/js/src/motion.js

+      var $postBody = $('.post-body');
+      var $postBodyTransition = CONFIG.motion.transition.post_body;
+      var $collHeader = $('.collection-title, .archive-year');
+      var $collHeaderTransition = CONFIG.motion.transition.coll_header;


Identifier 'coll_header' is not in camel case.

houndci-bot · 2017-08-27T02:21:24Z

source/js/src/motion.js

+      var $postHeader = $('.post-header');
+      var $postHeaderTransition = CONFIG.motion.transition.post_header;
+      var $postBody = $('.post-body');
+      var $postBodyTransition = CONFIG.motion.transition.post_body;


Identifier 'post_body' is not in camel case.

houndci-bot · 2017-08-27T02:21:24Z

source/js/src/motion.js

+      var $postBlock = $('.post-block');
+      var $postBlockTransition = CONFIG.motion.transition.post_block;
+      var $postHeader = $('.post-header');
+      var $postHeaderTransition = CONFIG.motion.transition.post_header;


Identifier 'post_header' is not in camel case.

houndci-bot · 2017-08-27T02:21:25Z

source/js/src/motion.js

-      var hasPost = $post.size() > 0;
+      //var $post = $('.post');
+      var $postBlock = $('.post-block');
+      var $postBlockTransition = CONFIG.motion.transition.post_block;


Identifier 'post_block' is not in camel case.

As affix & sidebar autoopenning for now use in global , need to remove `post-details.swig` from post and any other pages instead of `_layout.swig`.

* source.master: (1260 commits) [skip ci] Update PULL_REQUEST_TEMPLATE.md Update PULL_REQUEST_TEMPLATE.md Fix font-size only for mobile MOD: caution for Safari bug in `font` settings. Fix to iissnan#1881. Update pagination.styl Remove line-height declaration FIX: to iissnan#1829 global affix fix. Fix Mist font-size for Posts on mobile Update PULL_REQUEST_TEMPLATE.md Improve font configurations for global and headings Revert "FIX: Better way to adjust footer position in Pisces." Fix caption position Add Italian translation Fix fancybox style Uncomment `archives` after new option `override`. Update _config.yml Fix HoundCI issues Allow the user to override the whole configuration ... # Conflicts: # _config.yml

As affix & sidebar autoopenning for now use in global , need to remove `post-details.swig` from post and any other pages instead of `_layout.swig`.

ivan-nginx added 9 commits August 27, 2017 04:00

Merge pull request #19 from iissnan/master

5ccc451

Update from original.

MOD: motion effect [1].

613ec44

MOD: motion effect [2].

9438b61

MOD: motion effect [3].

8fdfa90

MOD: motion effect [4].

2083746

MOD: motion effect [5].

bf931dc

MOD: motion effect [6].

f7c3907

MOD: motion effect [8].

14846e7

1. Refactor motion effect option. 2. Global fix sidebar affix on all posts and pages [block script_extra].

ivan-nginx added Docs Enhancement labels Aug 27, 2017

ivan-nginx added this to the v5.1.3 milestone Aug 27, 2017

houndci-bot reviewed Aug 27, 2017

View reviewed changes

ivan-nginx merged commit 6fbb328 into iissnan:master Aug 27, 2017

ivan-nginx added the Breaking Change label Aug 27, 2017

ivan-nginx added a commit that referenced this pull request Sep 16, 2017

FIX: to #1829 global affix fix.

edd1ff0

As affix & sidebar autoopenning for now use in global , need to remove `post-details.swig` from post and any other pages instead of `_layout.swig`.

ivan-nginx mentioned this pull request Sep 22, 2017

加载页面时的渐变动画卡顿感明显 #308

Closed

stevenjoezhang mentioned this pull request Aug 1, 2020

更新Hexo 5.0.0及NexT v8.0.0-rc.5后存在的一些问题 next-theme/hexo-theme-next#71

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor `motion` & sidebar affix global fix. #1829

Refactor `motion` & sidebar affix global fix. #1829

ivan-nginx commented Aug 27, 2017 •

edited

Loading

houndci-bot Aug 27, 2017

houndci-bot Aug 27, 2017

houndci-bot Aug 27, 2017

houndci-bot Aug 27, 2017

houndci-bot Aug 27, 2017

houndci-bot Aug 27, 2017

houndci-bot Aug 27, 2017

houndci-bot Aug 27, 2017

Refactor motion & sidebar affix global fix. #1829

Refactor motion & sidebar affix global fix. #1829

Conversation

ivan-nginx commented Aug 27, 2017 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Refactor `motion` & sidebar affix global fix. #1829

Refactor `motion` & sidebar affix global fix. #1829

ivan-nginx commented Aug 27, 2017 •

edited

Loading