diff --git a/README.md b/README.md
index 125685f..c6a10ee 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,6 @@ on and off the page.
# Dependencies
* Barba
-* Jquery
# Installation
@@ -49,7 +48,6 @@ the ```data-transition``` attribute on each element that you wish to animate.
-
@@ -69,9 +67,9 @@ the ```data-transition``` attribute on each element that you wish to animate.
### JS
```
-$(function(){
+window.onload = function() {
Barba.Pjax.start();
-});
+}
```
# Setting a custom transition time
diff --git a/example/index.html b/example/index.html
index 6c946cf..9f87aa2 100644
--- a/example/index.html
+++ b/example/index.html
@@ -21,7 +21,6 @@
-
diff --git a/example/main.js b/example/main.js
index 86e5838..de9e152 100644
--- a/example/main.js
+++ b/example/main.js
@@ -1,3 +1,3 @@
-$(function(){
+window.onload = function() {
Barba.Pjax.start();
-});
+}
diff --git a/example/post.html b/example/post.html
index f4be2b3..7981ae4 100644
--- a/example/post.html
+++ b/example/post.html
@@ -29,7 +29,6 @@
My Post Title
-
diff --git a/package.json b/package.json
index 2b0626d..d8ecbc8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "barba-transitions",
- "version": "1.0.4",
+ "version": "1.1.0",
"description": "An addon to BarbaJS which makes it really easy to use css transitions for page transitions.",
"main": "barba.transitions.js",
"directories": {
diff --git a/src/transition.js b/src/transition.js
index 318b011..cd469a9 100644
--- a/src/transition.js
+++ b/src/transition.js
@@ -9,7 +9,7 @@ var Transition = Barba.BaseTransition.extend({
runTransition: function() {
- $('body').css('overflow', 'hidden');
+ document.body.style.overflow = 'hidden';
////////////////////////////
// Setup
@@ -21,22 +21,40 @@ var Transition = Barba.BaseTransition.extend({
////////////////////////////
// Set the animation time on all elements
- var allAnimationElements = $('[' + transitionSelector + ']');
- $.each(allAnimationElements, function() {
- $(this).css('animation-duration', transitionLengthSeconds).css('animation-delay', transitionLengthSeconds).css('animation-name', $(this).data('transition')).css('animation-fill-mode', 'forwards');
- })
+ var allAnimationElements = document.querySelectorAll('[' + transitionSelector + ']');
+ for (var i = 0; i < allAnimationElements.length; i++) {
+ element = allAnimationElements[i];
+
+ // Set styles
+ element.style.animationDuration = transitionLengthSeconds;
+ element.style.animationDelay = transitionLengthSeconds;
+ element.style.animationName = element.dataset.transition;
+ element.style.animationFillMode = 'forwards';
+ }
// Get all old elements with transitions
- var oldElements = $(this.oldContainer).find('[' + transitionSelector + ']');
- $.each(oldElements, function() {
- $(this).removeAttr('style');
- });
+ var oldElements = this.oldContainer.querySelectorAll('[' + transitionSelector + ']');
+ for (var i = 0; i < oldElements.length; i++) {
+ element = oldElements[i];
+ // Remove style tag
+ element.removeAttribute('style');
+ }
+
// Trigger out transitions
setTimeout(function(){
- $.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');
- });
+
+ for (var i = 0; i < oldElements.length; i++) {
+ element = oldElements[i];
+
+ // Set styles
+ element.style.animationDuration = transitionLengthSeconds;
+ element.style.animationDelay = '0s';
+ element.style.animationName = element.dataset.transition;
+ element.style.animationFillMode = 'forwards';
+ element.style.animationDirection = 'alternate-reverse';
+ }
+
}, transitionTimeout);
var x = this;
@@ -45,11 +63,14 @@ var Transition = Barba.BaseTransition.extend({
// Remove old container and add new one
x.oldContainer.style.visibility = 'hidden';
x.newContainer.style.visibility = 'visible';
+
+ // Remove style tag at the end of the animation
setTimeout(function(){
- $('body').css('overflow', 'visible');
- $.each(allAnimationElements, function() {
- $(this).removeAttr('style');
- });
+ document.body.style.overflow = 'visible';
+ for (var i = 0; i < allAnimationElements.length; i++) {
+ element = allAnimationElements[i];
+ element.removeAttribute('style');
+ }
}, transitionLength);
// Scroll to top
@@ -60,6 +81,7 @@ var Transition = Barba.BaseTransition.extend({
}
+ // Mark as done
setTimeout(function(){
done(x);
}, transitionLength + transitionTimeout);