No Transitions - Githubissues

joelcdoyle commented 9 years ago

I am unable to get transitions to work. I've included the SCSS and verified through the web inspector that it is being loaded, but my slides change instantly with no animations.

When I load up the boilerplate in the browser the transitions do work, but not in my custom page.

This is how I'm including the scss, along with a few other plugins:

@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../bower_components/bootstrap-sass-datepicker/sass/datepicker";
@import "../bower_components/deck.js/core/deck.core";
@import "../bower_components/deck.js/extensions/goto/deck.goto";
@import "../bower_components/deck.js/extensions/scale/deck.scale";
@import "../bower_components/deck.js/themes/transition/horizontal-slide";

All the other plugins are behaving correctly. Is there something else I need to include to make transitions work?

There's nothing special about my slide setup:

<div class="slide">
  <h1>Hello...</h1>
</div>
<div class="slide">
  <h1>...World!</h1>
</div>

imakewebthings commented 9 years ago

@joelcdoyle Might you be able to provide a live link to the deck? There's nothing obviously wrong from what you've posted so far.

joelcdoyle commented 9 years ago

I wish I could, but it's a private project. I can give some further clues, though.

I'm using the fieldset of a form as the slides:

<form>
  <fieldset id="personal-slide">
    ... labels and inputs ...
  </fieldset>
  <fieldset id="card-slide">
    ... more inputs and labels ...
  </fieldset>
  <fieldset id="#location-slide">
    ... last set of labels and inputs ...
  </fieldset>
</form>

Then I'm calling deck.js in the usual way:

$.deck([
  '#personal-slide', '#card-slide', '#location-slide'
]);

Functionally it works filne. I'm just not getting any transitions. I've tried including each transition individually and none of them work. If I include theme styles, they work fine.

imakewebthings commented 9 years ago

My transition themes expect your slides to have a class of slide. You should either give them that class name (and you could drop having to list out all the ids in the initializer) or change the transition theme to work with your HTML customization.

joelcdoyle commented 9 years ago

Ok, having the class 'slide' didn't help. I know you closed this ticket, but I'm still having this problem. I've tried changing the fieldset to a regular div. I've tried adding the 'deck-container' class to a parent div.

I've tried removing all scss imports other than deck.js. Still no luck. I can't send a link, but here is my markup:

<div class="container deck-container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3">
      <h1>Register</h1>
    </div>
  </div>
  <div class="row large-bottom-margin">

    <div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3 ">

      <div class="alert alert-danger hidden" id="server-errors"></div>

      <form role="form" id="registration-form">

        <div id="personal-slide" class="slide">
          <div class="form-group col-xs-12">
            <label class="control-label" for="firstName">First Name: </label>
            <input class="form-control" name="firstName" id="firstName" type="text" placeholder="First Name" data-parsley-required-message="You must enter your first name" data-parsley-group="personal" required />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="lastName">Last Name: </label>
            <input class="form-control" name="lastName" id="lastName" type="text" placeholder="Last Name" data-parsley-group="personal" required />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="dob">Date of Birth: </label>
            <input id="dob" name="dob" class="form-control datepicker" placeholder="Date of Birth" data-parsley-group="personal" required />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="phone">Phone Number: </label>
            <input class="form-control" name="phone" id="phone" type="text" placeholder="Phone Number" data-parsley-group="personal" required />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="email">Email Address: </label>
            <input class="form-control" name="email" id="email" type="email" placeholder="Email Address" data-parsley-group="personal" required />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="password">Password: </label>
            <input class="form-control" name="password" id="password" type="password" placeholder="Password" minlength="8" data-parsley-group="personal" required />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="confirm-password">Confirm Password: </label>
            <input class="form-control" name="confirm-password" id="confirm-password" type="password" placeholder="Confirm Password" required data-parsley-equalTo="#password" data-parsley-equalTo-message="Passwords must match!" data-parsley-group="personal"  />
          </div>
          <div class="form-group col-xs-12">
            <button type="button" class="btn btn-primary btn-block btn-next btn-lg btn-left" data-parsley-group="personal" >NEXT</button>
          </div>
        </div>

        <div id="card-slide" class="slide">

          <div class="form-group col-xs-12">
            <label class="control-label" for="card-name">Name on Card: </label>
            <input class="form-control" name="card-name" id="card-name" type="text" data-parsley-group="credit-card" required />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="card-number">Card Number: </label>
            <input class="form-control" name="card-number" id="card-number" type="tel" placeholder="Card Number" minlength="15" data-parsley-group="credit-card" required />
          </div>
          <div class="form-group">
            <div class="col-xs-4">
              <label class="control-label" for="card-expiry-month">Expiration Month: </label>
              <select class="form-control" name="card-expiry-month" id="card-expiry-month" data-parsley-group="credit-card" required >
                <option value="">Select month...</option>
                <option value="01">January</option>
                <option value="02">February</option>
                <option value="03">March</option>
                <option value="04">April</option>
                <option value="05">May</option>
                <option value="06">June</option>
                <option value="07">July</option>
                <option value="08">August</option>
                <option value="09">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
              </select>
            </div>
            <div class="col-xs-4">
              <label class="control-label" for="card-expiry-year">Expiration Year: </label>
              <select class="form-control" name="card-expiry-year" id="card-expiry-year" data-parsley-group="credit-card" required >
                <option value="">Select year...</option>
              </select>
            </div>
            <div class="col-xs-4">
              <label class="control-label" for="card-cvc">CVC: </label>
              <input class="form-control" name="card-cvc" id="card-cvc" type="tel" data-parsley-group="credit-card" required />
            </div>
          </div>
          <div class="form-group col-xs-12">
            <label for="card-zip" class="control-label">Zip Code:</label>
            <input type="tel" class="form-control" id="card-zip" name="card-zip" data-parsley-group="credit-card"  required />
          </div>
          <div class="form-group col-xs-12">
            <button type="button" class="btn btn-primary btn-block btn-next btn-lg btn-left" data-parsley-group="credit-card" >NEXT</button>
          </div>
        </div>

        <div id="location-slide" class="slide" >
          <div class="form-group col-xs-12">
            <label class="control-label" for="location-nickname">Location Nickname: </label>
            <input class="form-control" name="location-nickname" id="location-nickname" type="text"  required />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="address1">Street: </label>
            <input class="form-control" name="address1" id="address1" type="text" required />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="address2">Apt / Suite: </label>
            <input class="form-control" name="address2" id="address2" type="text" />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="city">City: </label>
            <input class="form-control" name="city" id="city" type="text" required />
          </div>
          <div class="form-group col-xs-12">
            <label class="control-label" for="state">State: </label>
            <select class="form-control" name="state" id="state" type="text" required >
              <option value=""></option>
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="DC">District Of Columbia</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="HI">Hawaii</option>
              <option value="ID">Idaho</option>
              <option value="IL">Illinois</option>
              <option value="IN">Indiana</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NV">Nevada</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NM">New Mexico</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="ND">North Dakota</option>
              <option value="OH">Ohio</option>
              <option value="OK">Oklahoma</option>
              <option value="OR">Oregon</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="SD">South Dakota</option>
              <option value="TN">Tennessee</option>
              <option value="TX">Texas</option>
              <option value="UT">Utah</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WA">Washington</option>
              <option value="WV">West Virginia</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
            </select>
          </div>
          <div class="form-group col-xs-12">
            <label for="zip" class="control-label">Zip Code:</label>
            <input type="tel" class="form-control" id="zip" name="zip" required />
          </div>
          <div class="form-group col-xs-12">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

...

<script>
  $(function(){
    $.deck('.slide');
  });
</script>

imakewebthings commented 9 years ago

Again, I refer to the chunk of CSS i linked earlier:

.csstransitions.csstransforms .deck-container > .slide { ... }

That > means the transition theme also expects slides to be direct children of the deck container. What this means, really, is the transition themes were developed primarily to work with the boilerplate, stock HTML setup of:

body
    .deck-container
        .slide
        .slide
        .slide
        .slide
        ...

Again, you are going to have to make custom CSS changes to match your specialized HTML structure.

joelcdoyle commented 9 years ago

Awesome! Thanks for the correction

imakewebthings / deck.js

No Transitions #174