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
- Added a new `autoappear` mode, for use in cases where adding animation classes is too much of a hassle, like inside Markdown.
7
+
- Started keeping the changelog.
8
+
9
+
10
+
11
+
## [1.1.0] - 2021-09-03
12
+
### Added
13
+
- Added Github corner badge
14
+
15
+
### Changed
16
+
- Changed readme
17
+
18
+
19
+
20
+
## [1.0.9] - 2021-06-30
21
+
### Changed
22
+
- Fixed a bug where '=' was '=='.
23
+
24
+
25
+
26
+
## [1.0.8] - 2021-06-27
27
+
### Added
28
+
- Choose an event at which Appearance launches its animations
29
+
30
+
### Changed
31
+
- Appearance now shows the complete slides from the overview
32
+
33
+
34
+
35
+
## [1.0.7] - 2020-06-28
36
+
### Changed
37
+
- Clearing timeouts that are in past slides. This solves 'hanging' Appearance items if you slide back and forth.
38
+
39
+
40
+
41
+
## [1.0.6] - 2020-06-28
42
+
### Changed
43
+
- Fix bug that hid Appearance items in PDF exports.
44
+
45
+
46
+
47
+
## [1.0.5] - 2020-05-20
48
+
### Added
49
+
- Added compatibility with the new Reveal.js 4 that changes the way plugins work.
50
+
51
+
52
+
53
+
## [1.0.4] - 2020-05-20
54
+
### Added
55
+
- The 1.0.4 release is compatible with Reveal.js 3. Reveal versions lower than 4 have no "slidetransitionend" event, so this release also has the Transit.js plugin included (see https://github.com/Martinomagnifico/reveal.js-transit for more information).
Copy file name to clipboardExpand all lines: README.md
+41-5Lines changed: 41 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,13 +12,11 @@ In Powerpoint you can make slides with items that appear automatically with effe
12
12
13
13
We do not want the animations to start during the slide transition, so we wait for the slide transition to end. Then the animations will start automatically if the HTML is set up to use Appearance.
14
14
15
+
Version 1.1.1 adds an `autoappear` mode for use in cases where adding animation classes is too much of a hassle, like inside Markdown.
15
16
16
17
17
-
## Installation
18
-
19
-
The Appearance plugin has been rewritten for Reveal.js version 4.
20
18
21
-
If you want to use Appearance with an older version of Reveal, use the [1.0.4 version](https://github.com/Martinomagnifico/reveal.js-appearance/releases).
19
+
## Installation
22
20
23
21
### Regular installation
24
22
@@ -94,6 +92,23 @@ It is easy to set up your HTML structure for Appearance:
94
92
<liclass="animated bounceInLeft">It adds some attention.</li>
95
93
</ul>
96
94
```
95
+
When you are working with Markdown, this can be a chore so if you do not want to add all these classes, you can set the option `autoappear` to `true` (see Configuration below) and let Appearance do the heavy work. You do not need to add any markup and it will stay like this:
96
+
97
+
```html
98
+
<ul>
99
+
<li>Add it to any text element</li>
100
+
<li>Like list items, or headers.</li>
101
+
<li>It adds some attention.</li>
102
+
</ul>
103
+
```
104
+
or this:
105
+
106
+
```markdown
107
+
* Add it to any text element
108
+
* Like list items, or headers.
109
+
* It adds some attention.
110
+
111
+
```
97
112
98
113
99
114
## Configuration
@@ -108,7 +123,9 @@ Reveal.initialize({
108
123
visibleclass:'in',
109
124
hideagain:true,
110
125
delay:300,
111
-
appearevent:'slidetransitionend'
126
+
appearevent:'slidetransitionend',
127
+
autoappear:false,
128
+
autoelements:false
112
129
},
113
130
plugins: [ Appearance ]
114
131
});
@@ -119,6 +136,9 @@ Reveal.initialize({
119
136
***`hideagain`**: Change this (true/false) if you want to see the shown elements if you go back.
120
137
***`delay`**: Base time in ms between appearances.
121
138
***`appearevent`**: Use a specific event at which Appearance starts.
139
+
***`autoappear`**: Use this when you do not want to add classes to each item that you want to appear, and just let Appearance add animation classes to (all of) the provided elements in the presentation. See "Using 'autoappear'" mode below.
140
+
***`autoelements`**: These are the elements that `autoappear` will target. Each element has a selector and an animation class. If `autoappear` is off, the elements will still get animation if the section contains a `data-autoappear` attribute.
141
+
122
142
123
143
### Changing the 'appearevent'
124
144
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.
@@ -134,6 +154,22 @@ These same event triggers can be set through the data-attribute `data-appeareven
134
154
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
155
136
156
157
+
### Using 'autoappear' mode
158
+
Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements in the presentation.
159
+
160
+
With the option `autoappear` set to `true`, ALL elements in the presentation that have a certain selector will get an animation. These selectors and the animations can be set in the configuration options like this:
161
+
162
+
```javascript
163
+
autoelements: {
164
+
'ul li':'fadeInLeft',
165
+
'ol li':'fadeInRight'
166
+
}
167
+
```
168
+
You can add any selector and animation class to this object.
169
+
170
+
With the option `autoappear` set to `false`, the above still works, but only on a data-attribute basis. ONLY elements in the presentation that are inside sections or fragments with a data-attribute of `data-autoappear` will be animated automatically.
<sectionclass="center"><small>In Powerpoint you can make slides with items that appear automatically with effects. Appearance is a plugin for Reveal.js that does the same. </small><br><br><small>Appearance is easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes in a separate CSS file to allow for a non-animated state. </small>
29
+
<sectionclass="center"><small>In Powerpoint you can make slides with items that appear automatically with effects. Appearance is a plugin for Reveal.js that does the same. </small><small>Appearance is easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes in a separate CSS file to allow for a non-animated state. </small>
30
30
<p>Let's check out what Appearance does:</p>
31
31
</section>
32
32
<sectionclass="center">
@@ -82,15 +82,23 @@ <h3>Change when Appearance starts</h3>
82
82
<pclass="animated fadeInUp">You can use any of the following events:</p>
83
83
</div>
84
84
<ul>
85
-
<liclass="animated bounceInLeft"><em>slidetransitionend</em> (default, after the transition)</li>
86
-
<liclass="animated bounceInLeft"><em>slidechanged</em> (with the transition)</li>
87
-
<liclass="animated bounceInLeft"><em>auto</em> (with transition, on autoanimate slides)</li>
85
+
<liclass="animated fadeInLeft"><em>slidetransitionend</em> (default, after the transition)</li>
86
+
<liclass="animated fadeInLeft"><em>slidechanged</em> (with the transition)</li>
87
+
<liclass="animated fadeInLeft"><em>auto</em> (with transition, on autoanimate slides)</li>
88
88
</ul>
89
89
<div><br><smallclass="animated fadeInUp">This can also be set per-slide with data-attributes.</small></div>
<h3>Autoappear mode</h3><small>Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements in the presentation (with the option <code>autoappear</code>) or per slide (with <code>data-autoappear</code>).</small>
thrownewTypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
72
+
}
73
+
18
74
varPlugin=functionPlugin(){
19
75
// Scope support polyfill
20
76
try{
@@ -100,6 +156,38 @@ var Plugin = function Plugin() {
0 commit comments