animation has-(name)

20 views

Skip to first unread message

Kurt Sys

unread,

Dec 8, 2014, 8:47:13 AM12/8/14

to jmpr...@googlegroups.com

Hey,

I'm trying to work out the animations properly. Somehow, the animation classes are reset after the second next step. Code: see below.

Expected behaviour (well, what I expect - I can't speak for the design of jmpress :p):

1. start loads - OK

2. push right arrow, 'something in here' fades in - OK

3. push right arrow, 'something else in here' shows - OK

4. push right arrow, 'something final!' shows - seems OK

However, when I check the class of the 2nd section's content:

In step 1: will-fade - OK

In step 2: will-fade do-fade - OK

In step 3: will-fade do-fade - hmmm, not really as expected... do-fade should disappear

In step 4: will-fade - ouch, what happened to has-fade?

What I want to do is start with an empty presenation, except for the title, and load (fade) each 'slide' when it's entered. This works. However, most content of the slide should still be shown when I leave it. At the end of the presentation, I'll have a nice overview of the presentation. However, since all slides unfade because they lose the class 'do-fade' and they never have class 'has-fade', the final overview slide (not shown in the code here) is as empty as the first one :p.

Am I missing something?

jmpress.js v0.4.5

jquery-2.1.1

Google Chrome 39.0.2171.65 / same (checking the classes) on FF34.x, however, 'slide animations' don't work properly in FF34 (issue is already known, so I don't bother about this)

Ubuntu 14.04 - LinuxMint 17 (64-bit)

Thx,

qsys

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Some title</title>
  [...]
 <script src="./jquery-2.1.1.min.js"></script>
 <script src="./jmpress.custom.js"></script> 
 
 <link href="./stylesheet.css" rel="stylesheet" type="text/css" />  
</head>


<body>
 
<div id="jmpress">
    <section
      id="start"
      data-x=0
      data-y=-4129
      data-z=4000
      data-scale=16>
      <h1 class="content">
          some title
      </h1>
    </section>

    <section 
      data-x=0
      data-y=-8660
      data-scale=5>
      
      <div class="content" data-jmpress="fade after 1s step">
         something in here
      </div>
    </section>


    <section
      data-x=-8500
      data-y=1340
      data-scale=5>
      <div class="content">
          something else in here
      </div>
    </section>
     
    <section
      data-x=8500
      data-y=1340
      data-scale=5>
      <div class="content">
          something final!
      </div>
    </section>
</div>


<script type="text/javascript">


$(document).ready(function() {
  $(function() {
    $('#jmpress').jmpress({
      stepSelector: 'section, article, .step',
      viewPort: {
 height: 1000,
 width: 2000
      },
      fullscreen: true,
      presentationMode: { use: true },
      animation: {
        transitionDuration: '1.25s',    // Length of animation
        transitionDelay: '250ms',         // Delay before animating
        transitionTimingFunction: 'ease'  // Animation effect
    },
    transitionDuration: 1250 // Set this according to animation.transitionDuration
                             // It is used for setting the timeout for the transition
    });
  });
});
  
</script>


</body>
</html>

and the css:

/** GENERAL **/
body {
  padding: 0;
  margin:0;
  font-family: Quicksand,Verdana,sans-serif;
  font-size: 80px;
  -webkit-font-smoothing: antialiased;
}


section {
  width: 1820px;
  height: 980px;
  padding-top: 25px;
  padding-bottom: 75px;
  padding-left: 50px;
  padding-right: 50px;
  
  text-align: center;
  
  display: table;
}


.content {
  display: table-cell;
  vertical-align: middle;
  height: 980px;
}

/** ANIMATION **/
.will-fade {
 -webkit-transition: opacity 1s;
 -moz-transition:    opacity 1s;
 -ms-transition:     opacity 1s;
 -o-transition:      opacity 1s;
 transition:         opacity 1s;
 opacity: 0;
}

.do-fade, .not-supported .will-fade, .has-fade {
 opacity: 1;
}

Reply all

Reply to author

Forward

0 new messages