Show loader immediately after fadeout

CHANGELOG.md

@@ -0,0 +1,33 @@
+## v4.0.2
+
+- [#97](https://github.com/blivesta/animsition/issues/97) Thanks [@JPustkuchen](https://github.com/JPustkuchen)
+
+
+## v4.0.1
+
+- Fixed : Safari back button bug. #79 #80 Thanks @nvartolomei
+- Fixed : sandbox overlay markup #76
+- Added browser-sync to devDependencies
+
+
+# v4.0.0
+
+- Added `loadingInner` option.
+- Added `timeout` option.
+- Added `timeoutCountdown` option.
+- Added `onLoadEvent` option.
+- Added `transition` option.
+- Added `outStart` event.
+- Added `outEnd` event.
+- Fixed outDuration: 0 crashes animsition on Safari only. #55 Thanks @Superpencil
+- Changed `unSupportCss` option's name to `browser`.
+- Changed `animsition-in` data's name to `animsition-in-class`.
+- Changed `animsition-out` data's name to `animsition-out-class`.
+- Changed `start` event's name to `inStart `.
+- Changed `end` event's name to `inEnd `.
+- Changed the click event for `.animsition-link`.
+- Changed `pageIn` methods's name to `in`.
+- Changed `pageOut` methods's name to `out`.
+- Changed a loading style. `svg` -> `css animation`.
+- Changed js file name. `jquery.animsition.js` -> `animsition.js`.
+- Removed dependency package in `package.json` and `bower.json`.

README.md

@@ -62,6 +62,7 @@ Please check that everything works before opening a pull-request.
 - [@brianmontanaweb](https://github.com/brianmontanaweb)
 - [@Superpencil](https://github.com/Superpencil)
 - [@tegansnyder](https://github.com/tegansnyder)
+- [@nvartolomei](https://github.com/nvartolomei)
 
 ## License
 Released under the [MIT](https://github.com/blivesta/animsition/blob/master/LICENSE.md) license.

dist/css/animsition.css

@@ -1,5 +1,5 @@
 /*!
- * animsition v4.0.0
+ * animsition v4.0.2
  * A simple and easy jQuery plugin for CSS animated page transitions.
  * http://blivesta.github.io/animsition
  * License : MIT

dist/js/animsition.js

@@ -1,5 +1,5 @@
 /*!
- * animsition v4.0.0
+ * animsition v4.0.2
  * A simple and easy jQuery plugin for CSS animated page transitions.
  * http://blivesta.github.io/animsition
  * License : MIT
@@ -25,7 +25,7 @@
         inDuration            :    1500,
         outDuration           :    800,
         linkElement           :   '.animsition-link',
-        // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
+        // e.g. linkElement   :   'a:not([target="_blank"]):not([href^="#"])'
         loading               :    true,
         loadingParentElement  :   'body', //animsition wrapper element
         loadingClass          :   'animsition-loading',
@@ -78,9 +78,13 @@
 
       var overlayMode = __.optionCheck.call(this, options);
 
-      if(overlayMode) __.addOverlay.call(this, options);
+      if (overlayMode && $('.' + options.overlayClass).length <= 0) {
+        __.addOverlay.call(this, options);
+      }
 
-      if(options.loading) __.addLoading.call(this, options);
+      if (options.loading && $('.' + options.loadingClass).length <= 0) {
+        __.addLoading.call(this, options);
+      }
 
       return this.each(function(){
         var _this = this;
@@ -96,12 +100,16 @@
 
           if(options.timeout) __.addTimer.call(_this);
 
-          $window.on('load.' + namespace + ' pageshow.' + namespace, function() {
-            if(__.settings.timer) clearTimeout(__.settings.timer);
-            __.in.call(_this);
-          });
+          if(options.onLoadEvent) {
+            $window.on('load.' + namespace, function() {
+              if(__.settings.timer) clearTimeout(__.settings.timer);
+              __.in.call(_this);
+            });
+          }
 
-          if(!options.onLoadEvent) $window.off('load.' + namespace + ' pageshow.' + namespace);
+          $window.on('pageshow.' + namespace, function(event) {
+            if(event.originalEvent.persisted) __.in.call(_this);
+          });
 
           // Firefox back button issue #4
           $window.on('unload.' + namespace, function() { });
@@ -149,7 +157,7 @@
 
       __.settings.timer = setTimeout(function(){
         __.in.call(_this);
-        $(window).off('load.' + namespace + ' pageshow.' + namespace);
+        $(window).off('load.' + namespace);
       }, options.timeoutCountdown);
     },
 
@@ -212,9 +220,12 @@
       var inDuration = __.animationCheck.call(_this, thisInDuration, false, true);
       var inClass = __.animationCheck.call(_this, thisInClass, true, true);
       var overlayMode = __.optionCheck.call(_this, options);
+      var outClass = $this.data(namespace).outClass;
 
       if(options.loading) __.removeLoading.call(_this);
 
+      if(outClass) $this.removeClass(outClass);
+
       if(overlayMode) {
         __.inOverlay.call(_this, inClass, inDuration);
       } else {
@@ -269,6 +280,8 @@
       var outDuration = __.animationCheck.call(_this, isOutDuration, false, false);
       var overlayMode = __.optionCheck.call(_this, options);
 
+      $this.data(namespace).outClass = outClass;
+
       if(overlayMode) {
         __.outOverlay.call(_this, outClass, outDuration, url);
       } else {
@@ -310,6 +323,9 @@
           $this.trigger(__.settings.events.outEnd);
           options.transition(url);
         });
+	    if (options.loading && $('.' + options.loadingClass).length <= 0) {
+		  __.addLoading.call(this, options);
+	    }
     },
 
     destroy: function(){

gulpfile.js

@@ -1,3 +1,7 @@
+'use strict';
+
+var browserSync = require('browser-sync');
+var browserReload = browserSync.reload;
 var autoprefixer = require('autoprefixer');
 var cssnano = require('gulp-cssnano');
 var del = require('del');
@@ -24,7 +28,8 @@ var banner = [
 
 var dirs = {
   src:'./src',
-  dist:'./dist'
+  dist:'./dist',
+  sandbox:'./sandbox'
 };
 
 gulp.task('css', function () {
@@ -60,21 +65,29 @@ gulp.task('js', function(){
     .pipe(gulp.dest(dirs.dist + '/js'));
 });
 
+gulp.task('serve', function() {
+  browserSync.init({
+    server: {
+      baseDir: '.',
+      directory: true
+    }
+  });
+  gulp.watch([dirs.src + '/css/**/*.css'], ['css']);
+  gulp.watch([dirs.src + '/js/*.js'], ['js']);
+  gulp.watch([
+    dirs.dist + '/**/*.min.{css,js}',
+    dirs.sandbox + '/*.{css,html}'
+  ]).on('change', browserReload);
+});
+
 gulp.task('cleanup', function(cb){
-  return del([ './dist' ],cb);
+  return del([ dirs.dist ],cb);
 });
 
-gulp.task('default',['build'], function(){
-  gulp.watch(['./src/css/**/*.css'], ['css']);
-  gulp.watch(['./src/js/*.js'], ['js']);
+gulp.task('default', ['build'], function(cb) {
+  runSequence('serve', cb);
 });
 
 gulp.task('build', ['cleanup'], function(cb){
-  runSequence(
-    [
-      'js',
-      'css'
-    ],
-    cb
-  );
+  runSequence('js', 'css', cb);
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "animsition",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "A simple and easy jQuery plugin for CSS animated page transitions.",
   "keywords": [
     "css3",
@@ -25,6 +25,7 @@
     "setup": "npm i && gulp build"
   },
   "devDependencies": {
+    "browser-sync": "^2.9.12",
     "autoprefixer":"^6.0.3",
     "del":"^1.2.0",
     "gulp":"^3.9.0",

sandbox/methods-in.html

@@ -61,14 +61,13 @@ <h2>Overlays</h2>
             .attr('src', data.items[0].image)
           )
         );
-
+      }).then(function() {
         $('.animsition').animsition({
           onLoadEvent: false
         })
         .each(function(i){
           $(this).animsition('in');
         });
-
       });
 
     }());

sandbox/methods-out.html

@@ -40,7 +40,10 @@ <h2>Overlays</h2>
       $animsition.animsition({
         onLoadEvent: false
       })
-      .each(function(i){
+    });
+
+    $(window).on('load', function() {
+      $animsition.each(function(i){
         $(this).animsition('in');
       });
     });

sandbox/overlay1.html

@@ -8,15 +8,15 @@
   <link href="sandbox.css" rel="stylesheet">
   <link href="../dist/css/animsition.min.css" rel="stylesheet">
   <style media="screen">
-    .animsition-overlay.bg-init,
+    .bg-init,
     .animsition-overlay-slide {
       background-color: #81D4FA;
     }
   </style>
 </head>
-<body>
+<body class="bg-init">
 
-  <div class="animsition-overlay bg-init">
+  <div class="animsition-overlay">
 
     <div class="item bg-purple">
       <h1>Animsition: overlay1</h1>
@@ -52,7 +52,7 @@ <h2>Overlays</h2>
     })
     .one('animsition.inStart',function(){
 
-      $(this).removeClass('bg-init');
+      $('body').removeClass('bg-init');
 
       $(this)
         .find('.item')

sandbox/overlay2.html

@@ -8,15 +8,15 @@
   <link href="sandbox.css" rel="stylesheet">
   <link href="../dist/css/animsition.min.css" rel="stylesheet">
   <style media="screen">
-    .animsition-overlay.bg-init,
+    .bg-init,
     .animsition-overlay-slide {
       background-color: #81D4FA;
     }
   </style>
 </head>
-<body>
+<body class="bg-init">
 
-  <div class="animsition-overlay bg-init">
+  <div class="animsition-overlay">
 
     <div class="item bg-green">
       <h1>Animsition: overlay2</h1>
@@ -52,7 +52,7 @@ <h2>Overlays</h2>
     })
     .one('animsition.inStart',function(){
 
-      $(this).removeClass('bg-init');
+      $('body').removeClass('bg-init');
 
       $(this)
         .find('.item')