You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -104,20 +104,36 @@ There are a few options that you can change from the Reveal.js options. The valu
104
104
Reveal.initialize({
105
105
// ...
106
106
appearance: {
107
-
// The baseclass uses the baseclass from Animate.css. Change it if you like
108
107
baseclass:'animated',
109
-
// Use a specific class for the visible state.
110
108
visibleclass:'in',
111
-
// Change this if you want to see the shown elements if you go back
112
109
hideagain:true,
113
-
// Base time between appearances
114
-
delay:300
115
-
110
+
delay:300,
111
+
appearevent:'slidetransitionend'
116
112
},
117
113
plugins: [ Appearance ]
118
114
});
119
115
```
120
116
117
+
***`baseclass`**: The baseclass uses the baseclass from Animate.css. Change it if you like.
118
+
***`visibleclass`**: Use a specific class for the visible state.
119
+
***`hideagain`**: Change this (true/false) if you want to see the shown elements if you go back.
120
+
***`delay`**: Base time in ms between appearances.
121
+
***`appearevent`**: Use a specific event at which Appearance starts.
122
+
123
+
### Changing the 'appearevent'
124
+
When you navigate from slide to slide, you can set transition effects in Reveal. These effects take some time. That's why, by default, Appearance only starts when the slide transition has ended.
125
+
126
+
There are cases however, where there is hardly any transition, for example, when going from an autoanimate slide to another. Reveal then suppresses the user-set transition to a short opacity change. Starting *together with* the transition might then be nicer. You can use any of the following events:
127
+
128
+
**slidetransitionend* (default, Appearance will start animating elements after the transition)
129
+
**slidechanged* (Appearance will start together with the transition)
130
+
**auto* (Appearance will start together with the transition, but only on autoanimate slides, other slides will use *slidetransitionend*)
131
+
132
+
These same event triggers can be set through the data-attribute `data-appearevent`.
133
+
134
+
When using Appearance inside an autoanimate slide, and changing the appearevent to `slidechanged` or `auto`, keep in mind that Reveal transforms opacity for all non-autoanimate items, while Appearance does the same on most of the effects. To avoid strange behaviour, wrap these Appearance items in a parent. For example, a list of animated bullet points works well, because the animated class is on the children, not the parent. Separate headings or other elements do not have that, so should be wrapped.
135
+
136
+
121
137
122
138
## Now change it
123
139
@@ -129,6 +145,7 @@ It is easy to change the effects for Appearance. Here's how to change the delay
<pclass="animated fadeInUp">You can use any of the following events:</p>
80
+
</div>
81
+
<ul>
82
+
<liclass="animated bounceInLeft"><em>slidetransitionend</em> (default, after the transition)</li>
83
+
<liclass="animated bounceInLeft"><em>slidechanged</em> (with the transition)</li>
84
+
<liclass="animated bounceInLeft"><em>auto</em> (with transition, on autoanimate slides)</li>
85
+
</ul>
86
+
<div>
87
+
<pclass="animated fadeInUp">This can also be set per-slide with data-attributes</p><smallclass="animated fadeInUp">Reveal forces opacity changes on unmatched autoanimate items, while Appearance does the same. To avoid getting animation stutter, make sure that your Appearance items are nested in a parent that does not use an animation class.</small>
0 commit comments