Updated so the data-transition css selector is no longer needed

Author: JoeeGrigg

README.md

@@ -43,7 +43,7 @@ the ```data-transition``` attribute on each element that you wish to animate.
   </header>
   <div id="barba-wrapper">
     <div class="barba-container">
-      <section class="all-posts" data-transition="fadein">
+      <section class="all-posts" data-transition="fadeIn">
         This is the main page content
       </section>
     </div>
@@ -64,10 +64,6 @@ the ```data-transition``` attribute on each element that you wish to animate.
   0% {opacity: 0;}
   100% {opacity: 1;}
 }
-
-[data-transition=fadein] {
-  animation-name: fadeIn;
-}
 ```
 
 ### JS

example/index.html

@@ -9,7 +9,7 @@
   <header><h1><a href="/index.html">My Blog</a></h1></header>
   <div id="barba-wrapper">
     <div class="barba-container">
-      <section class="all-posts" data-transition="fadein">
+      <section class="all-posts" data-transition="fadeIn">
         <ul>
           <li><a href="post.html">Post 1</a></li>
           <li><a href="post.html">Post 2</a></li>

example/post.html

@@ -9,10 +9,10 @@
   <header><h1><a href="index.html">My Blog</a></h1></header>
   <div id="barba-wrapper">
     <div class="barba-container">
-      <section class="sidebar" data-transition="slideinright">
+      <section class="sidebar" data-transition="slideInRight">
         Hello, I am the sidebar
       </section>
-      <section class="post" data-transition="fadeinup">
+      <section class="post" data-transition="fadeInUp">
         <h2>My Post Title</h2>
         <div class="content">
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
@@ -31,7 +31,7 @@ <h2>My Post Title</h2>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javascript"></script>
   <script src="https://rawgit.com/luruke/barba.js/master/dist/barba.min.js" type="text/javascript"></script>
-  <script src="barba.transitions.js" type="text/javascript"></script>
+  <script src="temp/barba.transitions.min.js" type="text/javascript"></script>
   <script src="main.js" type="text/javascript"></script>
 </body>
 </html>

example/style.css

@@ -47,15 +47,3 @@ section.sidebar {
   0% {opacity: 0; transform: translate3d(-100%, 0, 0);}
   100% {opacity: 1; transform: none;}
 }
-
-[data-transition=fadein] {
-  animation-name: fadeIn;
-}
-
-[data-transition=fadeinup] {
-  animation-name: fadeInUp;
-}
-
-[data-transition=slideinright] {
-  animation-name: slideInRight;
-}

gulpfile.js

@@ -52,7 +52,7 @@ gulp.task('js-dev', function(){
 
 gulp.task('watch', function() {
 
-  gulp.watch('src/**/*.js', ['js']);
+  gulp.watch('src/**/*.js', ['js-dev']);
 
 });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "barba-transitions",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "An addon to BarbaJS which makes it really easy to use css transitions for page transitions.",
   "main": "barba.transitions.js",
   "directories": {

src/transition.js

@@ -15,36 +15,28 @@ var Transition = Barba.BaseTransition.extend({
     // Setup
     ////////////////////////////
     var transitionLength = parseInt(Barba.transitionLength),
-        transitionTimeout = 50,
+        transitionTimeout = 100,
         transitionLengthSeconds = (transitionLength / 1000) + 's',
         transitionSelector = 'data-transition'; 
     ////////////////////////////
 
     // Set the animation time on all elements
     var allAnimationElements = $('[' + transitionSelector + ']');
     $.each(allAnimationElements, function() {
-      $(this).css('animation-duration', transitionLengthSeconds).css('animation-delay', transitionLengthSeconds);
+      $(this).css('animation-duration', transitionLengthSeconds).css('animation-delay', transitionLengthSeconds).css('animation-name', $(this).data('transition')).css('animation-fill-mode', 'forwards');
     })
 
     // Get all old elements with transitions
-    var cashEl = $(this.oldContainer),
-        allTransitions = cashEl.find('[' + transitionSelector + ']'),
-        transitions = [];
-
-    $.each(allTransitions, function() {
-      x = {};
-      x['transition'] = $(this).attr(transitionSelector);
-      $(this).removeAttr(transitionSelector).css('animation-direction', 'alternate-reverse').css('animation-delay', '0s');
-      x['element'] = $(this);
-      transitions.push(x);
+    var oldElements = $(this.oldContainer).find('[' + transitionSelector + ']');
+    $.each(oldElements, function() {
+      $(this).removeAttr('style');
     });
 
-    // Trigger transitions
+    // Trigger out transitions
     setTimeout(function(){
-      for (var i = 0; i < transitions.length; i++) {
-        var el = transitions[i];
-        el['element'].attr(transitionSelector, el['transition']);
-      }
+      $.each(oldElements, function() {
+        $(this).css('animation-duration', transitionLengthSeconds).css('animation-delay', transitionLengthSeconds).css('animation-name', $(this).data('transition')).css('animation-direction', 'alternate-reverse').css('animation-delay', '0s').css('animation-fill-mode', 'forwards');
+      });
     }, transitionTimeout);
 
     var x = this;
@@ -55,6 +47,9 @@ var Transition = Barba.BaseTransition.extend({
       x.newContainer.style.visibility = 'visible';
       setTimeout(function(){
         $('body').css('overflow', 'visible');
+        $.each(allAnimationElements, function() {
+          $(this).removeAttr('style');
+        });
       }, transitionLength);
 
       // Scroll to top