added transitions and logic for showing, hiding next, previous buttons and get started button

Author: marcgurney

src/tour/index.jade

@@ -11,24 +11,25 @@
         p.feature-description See a list of collections in the left sidebar. Select a collection and Compass will instantly start analyzing the schema data. Use the search filter at the top to narrow your list of collections.
       #f1-content.feature-content
         h3.feature-title Browse the Schema
-        p.feature-description Once a collection is loaded Compass will visualize the collection schema. Field are listed as rows in the main view. The left side of the row displays the field name and datatype distribution. The right side of the row displays a visualization of some of the data stored in the field.
+        p.feature-description Once a collection is loaded Compass will visualize the collection schema. Field are listed as rows in the main view. The left side of the row displays the field name and datatype distribution, the right side displays a visualization of the data.
       #f2-content.feature-content
         h3.feature-title View Data Distribution
-        p.feature-description -------
+        p.feature-description View the charts in the right-hand column of each row to see data distribution at a high level. Hover over charts to see more detail.
       #f3-content.feature-content
         h3.feature-title Build Queries
-        p.feature-description -------
+        p.feature-description Click on charts to build MongoDB queries. Click and drag within bar charts to select multiple values. Edit your query by typing directly into the query bar.
       #f4-content.feature-content
         h3.feature-title View Documents
-        p.feature-description -------
+        p.feature-description Open the document drawer on the right to view the raw JSON documents in the result set.
       .pager
-        a.previous-slide Previous
+        a.previous-slide.hide Previous
         ul
           li#f0.selected(data-n="0", title="Choose a collection")
           li#f1(data-n="1", title="Browse schema")
           li#f2(data-n="2", title="View data distribution")
           li#f3(data-n="3", title="Build queries")
           li#f4(data-n="4", title="View documents")
         a.next-slide Next
-      //- button#tour-remove(type="button", class="btn btn-info") Get Started
+      .get-started-button-holder
+        button#tour-remove.hide(type="button", class="btn btn-info") Get Started
 

src/tour/index.js

@@ -27,8 +27,25 @@ var TourView = View.extend({
     this.$animationGIF = this.query('#animation-gif');
     this.$tourRemove = this.query('#tour-remove');
   },
+  showHidePreviousNextButtons: function() {
+    if(this.tourCount === 0) {
+      $('.previous-slide').addClass('hide');
+    } else {
+      $('.previous-slide').removeClass('hide');
+    }
+
+    if(this.tourCount === 4) {
+      $('.next-slide').addClass('hide');
+      $('#tour-remove').removeClass('hide');
+    } else {
+      $('.next-slide').removeClass('hide');
+      $('#tour-remove').addClass('hide');
+    }
+  },
   showFeature: function(ev) {
-    var nCLick = ev.target.getAttribute('data-n');
+    var nCLick = ev.target.getAttribute('data-n'),
+        that = this;
+    
     if (nCLick === null) {
       return false;
     }
@@ -40,39 +57,63 @@ var TourView = View.extend({
 
     // select new
     ev.target.className = 'selected';
-    this.$animationGIF.src = this.tourImagesFolder + ev.target.id + '.gif';
+
+    $('#animation-gif').one('webkitTransitionEnd', function(event) {
+      that.$animationGIF.src = that.tourImagesFolder + ev.target.id + '.gif';
+      $('#animation-gif').css('opacity', '1');
+    });
+    $('#animation-gif').css('opacity', '0');
+    
     $('.feature-content#f' + nFeature + '-content').addClass('active');
+    
     this.tourCount = nFeature;
+    this.showHidePreviousNextButtons();
   },
   showPreviousFeature: function(ev) {
-    var currentFeature = this.tourCount;
-    var previousFeature = this.tourCount - 1;
+    var currentFeature = this.tourCount,
+        previousFeature = this.tourCount - 1,
+        that = this;
 
     // deselect old
     $('#features li.selected').removeClass('selected');
     $('.feature-content.active').removeClass('active');
 
     // select new
     $('#features li#f' + previousFeature).addClass('selected');
-    this.$animationGIF.src = this.tourImagesFolder + 'f' + previousFeature + '.gif';
+
+    $('#animation-gif').one('webkitTransitionEnd', function(event) {
+      that.$animationGIF.src = that.tourImagesFolder + 'f' + previousFeature + '.gif';
+      $('#animation-gif').css('opacity', '1');
+    });
+    $('#animation-gif').css('opacity', '0');
+    
     $('.feature-content#f' + previousFeature + '-content').addClass('active');
 
     this.tourCount = previousFeature;
+    this.showHidePreviousNextButtons();
   },
   showNextFeature: function(ev) {
-    var currentFeature = this.tourCount;
-    var nextFeature = this.tourCount + 1;
+    var currentFeature = this.tourCount,
+        nextFeature = this.tourCount + 1,
+        that = this;
 
     // deselect old
     $('#features li.selected').removeClass('selected');
     $('.feature-content.active').removeClass('active');
 
     // select new
     $('#features li#f' + nextFeature).addClass('selected');
-    this.$animationGIF.src = this.tourImagesFolder + 'f' + nextFeature + '.gif';
+    
+    $('#animation-gif').one('webkitTransitionEnd', function(event) {
+      that.$animationGIF.src = that.tourImagesFolder + 'f' + nextFeature + '.gif';
+      $('#animation-gif').css('opacity', '1');
+    });
+    $('#animation-gif').css('opacity', '0');
+    
     $('.feature-content#f' + nextFeature + '-content').addClass('active');
 
     this.tourCount = nextFeature;
+    this.showHidePreviousNextButtons();
   },
   tourRemove: function() {
     this.remove();

src/tour/index.less

@@ -1,3 +1,8 @@
+@keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
 #tour-out {
   position: absolute;
   top: 0;
@@ -32,18 +37,22 @@
     width: 66%;
 
     img {
+      // opacity: 0;
       width: 90%;
       margin: 20px auto 40px;
       display: block;
       border: 1px @gray6 solid;
       box-shadow: 0 8px 15px rgba(0,0,0,0.1);
+      // animation: fade-in 1000ms ease-out forwards;
+      transition: opacity 250ms ease-out;
     }
   }
   #features {
     width: 30%;
 
     .feature-content {
       display: none;
+      animation: fade-in 500ms ease-out;
 
       &.active {
         display: block;
@@ -106,5 +115,14 @@
       background: @green2;
       border-color: @green2;
     }
+    .get-started-button-holder {
+      text-align: center;
+      margin-top: 100px;
+
+      #tour-remove {
+        opacity: 0;
+        animation: fade-in 750ms ease-out 500ms forwards;
+      }
+    }
   }
 }