Fix: Typo in documentation for transition effect

introduction/index.html

@@ -16,7 +16,7 @@
 <h2 class="anchor anchorWithStickyNavbar_LWe7" id="the-playground">The playground<a href="#the-playground" class="hash-link" aria-label="Direct link to The playground" title="Direct link to The playground">​</a></h2>
 <!-- -->
 <!-- -->
-<main class="sc-kpDqfm duiAiP"><section class="sc-dhKdcB dLArrD"><div><h3>Toast Container</h3><div class="sc-fqkvVR beiBAJ"><div><span>&lt;</span><span kind="0" class="sc-dcJsrY bucnKN">ToastContainer</span></div><div><span kind="1" class="sc-dcJsrY ksXUOU">position</span>=&quot;top-right&quot;</div><div><span kind="1" class="sc-dcJsrY ksXUOU">autoClose</span>={5000}</div><div><span kind="1" class="sc-dcJsrY ksXUOU">hideProgressBar</span>={false}</div><div><span kind="1" class="sc-dcJsrY ksXUOU">newestOnTop</span>={false}</div><div><span kind="1" class="sc-dcJsrY ksXUOU">closeOnClick</span></div><div><span kind="1" class="sc-dcJsrY ksXUOU">rtl</span>={false}</div><div><span kind="1" class="sc-dcJsrY ksXUOU">pauseOnFocusLoss</span></div><div><span kind="1" class="sc-dcJsrY ksXUOU">draggable</span></div><div><span kind="1" class="sc-dcJsrY ksXUOU">pauseOnHover</span></div><div><span kind="1" class="sc-dcJsrY ksXUOU">theme</span>=&quot;light&quot;</div><div><span kind="1" class="sc-dcJsrY ksXUOU">transition</span>: Bounce<!-- -->,</div><div><span>/&gt;</span></div><div><div>{/* Same as */}</div><span>&lt;</span><span kind="0" class="sc-dcJsrY bucnKN">ToastContainer</span><span> <!-- -->/&gt;</span></div></div></div><div><h3>Toast Emitter</h3><div class="sc-fqkvVR beiBAJ"><div><span kind="0" class="sc-dcJsrY bucnKN">toast</span>(&#x27;🦄 Wow so easy!&#x27;, { </div><div><span kind="1" class="sc-dcJsrY ksXUOU">position</span>: &quot;top-right&quot;<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">autoClose</span>: 5000<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">hideProgressBar</span>: false<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">closeOnClick</span>: true<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">pauseOnHover</span>: true<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">draggable</span>: true<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">progress</span>: undefined<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">theme</span>: &quot;light&quot;<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">transition</span>: Bounce<!-- -->,</div><div>});</div></div></div></section><div><h3>Position</h3><div class="sc-eqUAAy bSoqSI"><input type="radio" id="top-left" name="position" label="top-left" color="#e91e63" class="sc-aXZVg jPRylx" value="top-left"><label for="top-left" color="#e91e63" class="sc-gEvEer jVBiyh">top-left</label><input type="radio" id="top-right" name="position" label="top-right" color="#e91e63" class="sc-aXZVg jPRylx" checked="" value="top-right"><label for="top-right" color="#e91e63" class="sc-gEvEer jVBiyh">top-right</label><input type="radio" id="top-center" name="position" label="top-center" color="#e91e63" class="sc-aXZVg jPRylx" value="top-center"><label for="top-center" color="#e91e63" class="sc-gEvEer jVBiyh">top-center</label><input type="radio" id="bottom-left" name="position" label="bottom-left" color="#e91e63" class="sc-aXZVg jPRylx" value="bottom-left"><label for="bottom-left" color="#e91e63" class="sc-gEvEer jVBiyh">bottom-left</label><input type="radio" id="bottom-right" name="position" label="bottom-right" color="#e91e63" class="sc-aXZVg jPRylx" value="bottom-right"><label for="bottom-right" color="#e91e63" class="sc-gEvEer jVBiyh">bottom-right</label><input type="radio" id="bottom-center" name="position" label="bottom-center" color="#e91e63" class="sc-aXZVg jPRylx" value="bottom-center"><label for="bottom-center" color="#e91e63" class="sc-gEvEer jVBiyh">bottom-center</label></div></div><div><h3>Type</h3><div class="sc-eqUAAy bSoqSI"><input type="radio" id="info" name="type" label="info" color="#e91e63" class="sc-aXZVg jPRylx" value="info"><label for="info" color="#e91e63" class="sc-gEvEer jVBiyh">info</label><input type="radio" id="success" name="type" label="success" color="#e91e63" class="sc-aXZVg jPRylx" value="success"><label for="success" color="#e91e63" class="sc-gEvEer jVBiyh">success</label><input type="radio" id="warning" name="type" label="warning" color="#e91e63" class="sc-aXZVg jPRylx" value="warning"><label for="warning" color="#e91e63" class="sc-gEvEer jVBiyh">warning</label><input type="radio" id="error" name="type" label="error" color="#e91e63" class="sc-aXZVg jPRylx" value="error"><label for="error" color="#e91e63" class="sc-gEvEer jVBiyh">error</label><input type="radio" id="default" name="type" label="default" color="#e91e63" class="sc-aXZVg jPRylx" checked="" value="default"><label for="default" color="#e91e63" class="sc-gEvEer jVBiyh">default</label></div></div><div><h3>Theme</h3><div class="sc-eqUAAy bSoqSI"><input type="radio" id="light" name="theme" label="light" color="#e91e63" class="sc-aXZVg jPRylx" checked="" value="light"><label for="light" color="#e91e63" class="sc-gEvEer jVBiyh">light</label><input type="radio" id="dark" name="theme" label="dark" color="#e91e63" class="sc-aXZVg jPRylx" value="dark"><label for="dark" color="#e91e63" class="sc-gEvEer jVBiyh">dark</label><input type="radio" id="colored" name="theme" label="colored" color="#e91e63" class="sc-aXZVg jPRylx" value="colored"><label for="colored" color="#e91e63" class="sc-gEvEer jVBiyh">colored</label></div></div><div class="sc-gsFSXq szHYH"><h3>Options</h3><div><label for="autoClose">Autoclose Delay<input type="number" name="autoClose" id="autoClose" value="5000">ms</label><label for="transition">Transition<select name="transition" id="transition"><option value="bounce" selected="">bounce</option><option value="slide">slide</option><option value="zoom">zoom</option><option value="flip">flip</option></select></label><label for="progress">Progress<input type="number" name="progress" id="progress" placeholder="0..1" min="0" max="1"></label><label for="limit">Limit<input type="number" name="limit" id="limit" min="0" value="0"></label></div><div class="sc-kAyceB gyVHGN"><ul><li><label for="hideProgressBar" class="sc-iGgWBj cWZbSy"><input id="hideProgressBar" type="checkbox" name="hideProgressBar">Hide progress bar(less fanciness!)</label></li><li><label for="closeOnClick" class="sc-iGgWBj cWZbSy"><input id="closeOnClick" type="checkbox" name="closeOnClick" checked="">Close on click</label></li><li><label for="pauseOnFocusLoss" class="sc-iGgWBj cWZbSy"><input id="pauseOnFocusLoss" type="checkbox" name="pauseOnFocusLoss" checked="">Pause toast when the window loses focus</label></li><li><label for="draggable" class="sc-iGgWBj cWZbSy"><input id="draggable" type="checkbox" name="draggable" checked="">Allow to drag and close the toast</label></li></ul><ul><li><label for="disableAutoClose" class="sc-iGgWBj cWZbSy"><input id="disableAutoClose" type="checkbox" name="disableAutoClose">Disable auto-close</label></li><li><label for="newestOnTop" class="sc-iGgWBj cWZbSy"><input id="newestOnTop" type="checkbox" name="newestOnTop">Newest on top* (play nice with bottom toast)</label></li><li><label for="pauseOnHover" class="sc-iGgWBj cWZbSy"><input id="pauseOnHover" type="checkbox" name="pauseOnHover" checked="">Pause delay on hover</label></li><li><label for="rtl" class="sc-iGgWBj cWZbSy"><input id="rtl" type="checkbox" name="rtl">Right to left layout*</label></li></ul></div></div><section class="sc-jXbUNg jARAge"><button class="sc-imWYAI eHElAY"><span role="img" aria-label="show alert">🚀</span> <!-- -->Show Toast</button><button class="sc-imWYAI eHElAZ">Promise</button><button class="sc-imWYAI eHElAZ"><span role="img" aria-label="update"></span> Update</button><button class="sc-imWYAI eHElAZ"><span role="img" aria-label="clear all">💩</span> <!-- -->Clear All</button><button class="sc-imWYAI eHElAZ"><span role="img" aria-label="reset options">🔄</span> <!-- -->Reset</button></section><div class="Toastify"></div></main>
+<main class="sc-kpDqfm duiAiP"><section class="sc-dhKdcB dLArrD"><div><h3>Toast Container</h3><div class="sc-fqkvVR beiBAJ"><div><span>&lt;</span><span kind="0" class="sc-dcJsrY bucnKN">ToastContainer</span></div><div><span kind="1" class="sc-dcJsrY ksXUOU">position</span>=&quot;top-right&quot;</div><div><span kind="1" class="sc-dcJsrY ksXUOU">autoClose</span>={5000}</div><div><span kind="1" class="sc-dcJsrY ksXUOU">hideProgressBar</span>={false}</div><div><span kind="1" class="sc-dcJsrY ksXUOU">newestOnTop</span>={false}</div><div><span kind="1" class="sc-dcJsrY ksXUOU">closeOnClick</span></div><div><span kind="1" class="sc-dcJsrY ksXUOU">rtl</span>={false}</div><div><span kind="1" class="sc-dcJsrY ksXUOU">pauseOnFocusLoss</span></div><div><span kind="1" class="sc-dcJsrY ksXUOU">draggable</span></div><div><span kind="1" class="sc-dcJsrY ksXUOU">pauseOnHover</span></div><div><span kind="1" class="sc-dcJsrY ksXUOU">theme</span>=&quot;light&quot;</div><div><span kind="1" class="sc-dcJsrY ksXUOU">transition</span>={Bounce}<!-- --></div><div><span>/&gt;</span></div><div><div>{/* Same as */}</div><span>&lt;</span><span kind="0" class="sc-dcJsrY bucnKN">ToastContainer</span><span> <!-- -->/&gt;</span></div></div></div><div><h3>Toast Emitter</h3><div class="sc-fqkvVR beiBAJ"><div><span kind="0" class="sc-dcJsrY bucnKN">toast</span>(&#x27;🦄 Wow so easy!&#x27;, { </div><div><span kind="1" class="sc-dcJsrY ksXUOU">position</span>: &quot;top-right&quot;<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">autoClose</span>: 5000<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">hideProgressBar</span>: false<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">closeOnClick</span>: true<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">pauseOnHover</span>: true<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">draggable</span>: true<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">progress</span>: undefined<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">theme</span>: &quot;light&quot;<!-- -->,</div><div><span kind="1" class="sc-dcJsrY ksXUOU">transition</span>: Bounce<!-- -->,</div><div>});</div></div></div></section><div><h3>Position</h3><div class="sc-eqUAAy bSoqSI"><input type="radio" id="top-left" name="position" label="top-left" color="#e91e63" class="sc-aXZVg jPRylx" value="top-left"><label for="top-left" color="#e91e63" class="sc-gEvEer jVBiyh">top-left</label><input type="radio" id="top-right" name="position" label="top-right" color="#e91e63" class="sc-aXZVg jPRylx" checked="" value="top-right"><label for="top-right" color="#e91e63" class="sc-gEvEer jVBiyh">top-right</label><input type="radio" id="top-center" name="position" label="top-center" color="#e91e63" class="sc-aXZVg jPRylx" value="top-center"><label for="top-center" color="#e91e63" class="sc-gEvEer jVBiyh">top-center</label><input type="radio" id="bottom-left" name="position" label="bottom-left" color="#e91e63" class="sc-aXZVg jPRylx" value="bottom-left"><label for="bottom-left" color="#e91e63" class="sc-gEvEer jVBiyh">bottom-left</label><input type="radio" id="bottom-right" name="position" label="bottom-right" color="#e91e63" class="sc-aXZVg jPRylx" value="bottom-right"><label for="bottom-right" color="#e91e63" class="sc-gEvEer jVBiyh">bottom-right</label><input type="radio" id="bottom-center" name="position" label="bottom-center" color="#e91e63" class="sc-aXZVg jPRylx" value="bottom-center"><label for="bottom-center" color="#e91e63" class="sc-gEvEer jVBiyh">bottom-center</label></div></div><div><h3>Type</h3><div class="sc-eqUAAy bSoqSI"><input type="radio" id="info" name="type" label="info" color="#e91e63" class="sc-aXZVg jPRylx" value="info"><label for="info" color="#e91e63" class="sc-gEvEer jVBiyh">info</label><input type="radio" id="success" name="type" label="success" color="#e91e63" class="sc-aXZVg jPRylx" value="success"><label for="success" color="#e91e63" class="sc-gEvEer jVBiyh">success</label><input type="radio" id="warning" name="type" label="warning" color="#e91e63" class="sc-aXZVg jPRylx" value="warning"><label for="warning" color="#e91e63" class="sc-gEvEer jVBiyh">warning</label><input type="radio" id="error" name="type" label="error" color="#e91e63" class="sc-aXZVg jPRylx" value="error"><label for="error" color="#e91e63" class="sc-gEvEer jVBiyh">error</label><input type="radio" id="default" name="type" label="default" color="#e91e63" class="sc-aXZVg jPRylx" checked="" value="default"><label for="default" color="#e91e63" class="sc-gEvEer jVBiyh">default</label></div></div><div><h3>Theme</h3><div class="sc-eqUAAy bSoqSI"><input type="radio" id="light" name="theme" label="light" color="#e91e63" class="sc-aXZVg jPRylx" checked="" value="light"><label for="light" color="#e91e63" class="sc-gEvEer jVBiyh">light</label><input type="radio" id="dark" name="theme" label="dark" color="#e91e63" class="sc-aXZVg jPRylx" value="dark"><label for="dark" color="#e91e63" class="sc-gEvEer jVBiyh">dark</label><input type="radio" id="colored" name="theme" label="colored" color="#e91e63" class="sc-aXZVg jPRylx" value="colored"><label for="colored" color="#e91e63" class="sc-gEvEer jVBiyh">colored</label></div></div><div class="sc-gsFSXq szHYH"><h3>Options</h3><div><label for="autoClose">Autoclose Delay<input type="number" name="autoClose" id="autoClose" value="5000">ms</label><label for="transition">Transition<select name="transition" id="transition"><option value="bounce" selected="">bounce</option><option value="slide">slide</option><option value="zoom">zoom</option><option value="flip">flip</option></select></label><label for="progress">Progress<input type="number" name="progress" id="progress" placeholder="0..1" min="0" max="1"></label><label for="limit">Limit<input type="number" name="limit" id="limit" min="0" value="0"></label></div><div class="sc-kAyceB gyVHGN"><ul><li><label for="hideProgressBar" class="sc-iGgWBj cWZbSy"><input id="hideProgressBar" type="checkbox" name="hideProgressBar">Hide progress bar(less fanciness!)</label></li><li><label for="closeOnClick" class="sc-iGgWBj cWZbSy"><input id="closeOnClick" type="checkbox" name="closeOnClick" checked="">Close on click</label></li><li><label for="pauseOnFocusLoss" class="sc-iGgWBj cWZbSy"><input id="pauseOnFocusLoss" type="checkbox" name="pauseOnFocusLoss" checked="">Pause toast when the window loses focus</label></li><li><label for="draggable" class="sc-iGgWBj cWZbSy"><input id="draggable" type="checkbox" name="draggable" checked="">Allow to drag and close the toast</label></li></ul><ul><li><label for="disableAutoClose" class="sc-iGgWBj cWZbSy"><input id="disableAutoClose" type="checkbox" name="disableAutoClose">Disable auto-close</label></li><li><label for="newestOnTop" class="sc-iGgWBj cWZbSy"><input id="newestOnTop" type="checkbox" name="newestOnTop">Newest on top* (play nice with bottom toast)</label></li><li><label for="pauseOnHover" class="sc-iGgWBj cWZbSy"><input id="pauseOnHover" type="checkbox" name="pauseOnHover" checked="">Pause delay on hover</label></li><li><label for="rtl" class="sc-iGgWBj cWZbSy"><input id="rtl" type="checkbox" name="rtl">Right to left layout*</label></li></ul></div></div><section class="sc-jXbUNg jARAge"><button class="sc-imWYAI eHElAY"><span role="img" aria-label="show alert">🚀</span> <!-- -->Show Toast</button><button class="sc-imWYAI eHElAZ">Promise</button><button class="sc-imWYAI eHElAZ"><span role="img" aria-label="update"></span> Update</button><button class="sc-imWYAI eHElAZ"><span role="img" aria-label="clear all">💩</span> <!-- -->Clear All</button><button class="sc-imWYAI eHElAZ"><span role="img" aria-label="reset options">🔄</span> <!-- -->Reset</button></section><div class="Toastify"></div></main>
 <div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>Important</div><div class="admonitionContent_BuS1"><p>By default, all toasts will inherit ToastContainer&#x27;s props. Props defined on toast supersede ToastContainer&#x27;s props. Props marked with * can only be set on the ToastContainer. The demo is not exhaustive, check the doc for more!</p></div></div>
 <h2 class="anchor anchorWithStickyNavbar_LWe7" id="features">Features<a href="#features" class="hash-link" aria-label="Direct link to Features" title="Direct link to Features">​</a></h2>
 <ul>