Robot
/
animate.css
mirror of https://github.com/animate-css/animate.css.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix for 'Edit this on Github' links (#1052) 

* Fix typo

* Fix 'Edit this on Github' links

* Revert "Fix 'Edit this on Github' links"

This reverts commit dfef5ab4f7.

* Fix edit on Github links

Co-authored-by: Jad Limcaco <jlimcaco@apple.com>
This commit is contained in:
Jad Limcaco 2020-05-07 11:19:42 -07:00 committed by GitHub
parent b29bc450f4
commit 882ce84d40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/index.html
View File

@ -836,7 +836,7 @@
</blockquote>
<p><strong>Animate.css</strong> is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.</p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/00-intro.md" title="Edit this on Github">Edit this on Github</a></p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/00-intro.md" title="Edit this on Github">Edit this on Github</a></p>
</section>
@ -900,7 +900,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
</code></pre>
<p>Even though custom properties are not supported by some aging browsers, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.</p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/01-usage.md" title="Edit this on Github">Edit this on Github</a></p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/01-usage.md" title="Edit this on Github">Edit this on Github</a></p>
</section>
@ -1026,7 +1026,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
}
</code></pre>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/02-utilities.md" title="Edit this on Github">Edit this on Github</a></p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/02-utilities.md" title="Edit this on Github">Edit this on Github</a></p>
</section>
@ -1048,7 +1048,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
&lt;/body&gt;
</code></pre>
<h3>Infinite animations should be avoided</h3>
<p>Even tough Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!</p>
<p>Even though Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!</p>
<h3>Mind the initial and final state of your elements</h3>
<p>All the Animate.css animations include a CSS property called <code>animation-fill-mode</code> which controls the states of an element before and after animation. You can read more about it <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode">here</a>. Animate.css defaults to <code>animation-fill-mode: both</code>, but you can change it to suit your needs.</p>
<h3>Don't disable the <code>prefers-reduced-motion</code> media query</h3>
@ -1067,7 +1067,7 @@ document.documentElement.style.setProperty('--animate-duration', '.5s');
<h3>Intervals between repeats</h3>
<p>Unfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result.</p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/03-best-practices.md" title="Edit this on Github">Edit this on Github</a></p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/03-best-practices.md" title="Edit this on Github">Edit this on Github</a></p>
</section>
@ -1119,7 +1119,7 @@ animateCSS('.my-element', 'animate__bounce').then((message) =&gt; {
</code></pre>
<p>If you had a hard time understanding the previous function, have a look at <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">classList</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a>.</p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/04-javascript.md" title="Edit this on Github">Edit this on Github</a></p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/04-javascript.md" title="Edit this on Github">Edit this on Github</a></p>
</section>
@ -1154,7 +1154,7 @@ animateCSS('.my-element', 'animate__bounce').then((message) =&gt; {
</code></pre>
<p>In the case of a new project, it's highly recommended to use the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in later versions, we might decide to discontinue the <code>animate.compat.css</code> file.</p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/06-migration.md" title="Edit this on Github">Edit this on Github</a></p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/06-migration.md" title="Edit this on Github">Edit this on Github</a></p>
</section>
@ -1197,7 +1197,7 @@ $ npm install
</code></pre>
<p>Easy peasy!</p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/07-custom-builds.md" title="Edit this on Github">Edit this on Github</a></p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/07-custom-builds.md" title="Edit this on Github">Edit this on Github</a></p>
</section>
@ -1211,7 +1211,7 @@ $ npm install
<h2>Contributing</h2>
<p>Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a <a href="https://codepen.io">pen</a>. That <strong>last one is important</strong>.</p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/08-contributing.md" title="Edit this on Github">Edit this on Github</a></p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/08-contributing.md" title="Edit this on Github">Edit this on Github</a></p>
</section>
@ -1239,7 +1239,7 @@ $ npm install
</tbody>
</table>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/09-contributors.md" title="Edit this on Github">Edit this on Github</a></p>
<p class="edit-github"><a href="https://github.com/daneden/animate.css/blob/master/docsSource/sections/09-contributors.md" title="Edit this on Github">Edit this on Github</a></p>
</section>
</div>

2
docsSource/compileMD.js
View File

@ -17,7 +17,7 @@ function compileMD(dir = 'sections') {
const sectionTemplate = (file, content) => {
const message = 'Edit this on Github';
const fileName = file.replace('.md', '').match(/([a-z])\w+/)[0];
const editURL = `https://github.com/daneden/animate.css/tree/master/source/docsSource/sections/${file}`;
const editURL = `https://github.com/daneden/animate.css/blob/master/docsSource/sections/${file}`;
const parsedContent = md.render(content);
return `

2
docsSource/sections/03-best-practices.md
View File

@ -28,7 +28,7 @@ Animating the `<html/>` or `<body/>` tags is possible, but you should avoid it.
### Infinite animations should be avoided
Even tough Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!
Even though Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!
### Mind the initial and final state of your elements