Skip to content

Commit

Permalink
animations doc update
Browse files Browse the repository at this point in the history
  • Loading branch information
@craftpip
craftpip committed Aug 10, 2017
1 parent 5acedcc commit 5bf22bb
Showing 1 changed file with 86 additions and 19 deletions.
105 changes: 86 additions & 19 deletions animations.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@
href="demo/libs/bundled.css">
<script src="demo/libs/bundled.js"></script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<link rel="stylesheet"
href="demo/demo.css">
Expand Down Expand Up @@ -207,8 +208,8 @@
<h1 style="margin-top: 7px;"
class="text-center">
<img
src="jquery-confirm.png"
alt="JQUERY-CONFIRM"/>
src="jquery-confirm.png"
alt="JQUERY-CONFIRM"/>
</h1>

<p>
Expand Down Expand Up @@ -292,15 +293,67 @@ <h2>Open/Close Animations</h2>
Impression lies in what we see.<br>
Different animations can be set for open and close events.
</p>
<div class="alert alert-info">
animateFromElement is added since v3.3.0, which animates the modal from the position of the button that was clicked.
<br> This feature does not play well with all the animation styles.
</div>
<!--<h3 id="animation">ANIMATION!</h3>-->
<div class="section">
<p>2D animations:</p>
<p>Recommended animations for animateFromElement:</p>
<button class="example16-a-1 btn btn-primary">scale</button>
<script type="text/javascript">
$('.example16-a-1').on('click', function () {
$.confirm({
animation: 'scale',
closeAnimation: 'scale',
});
});
</script>
<button class="example17-a-2 btn btn-primary">rotateY</button>
<script type="text/javascript">
$('.example17-a-2').on('click', function () {
$.confirm({
animation: 'rotateY',
closeAnimation: 'rotateY',
});
});
</script>
<button class="example18-a-3 btn btn-primary">rotateYR</button>
<script type="text/javascript">
$('.example18-a-3').on('click', function () {
$.confirm({
animation: 'rotateYR',
closeAnimation: 'rotateYR'
});
});
</script>
<button class="example19-a-4 btn btn-primary">rotateX</button>
<script type="text/javascript">
$('.example19-a-4').on('click', function () {
$.confirm({
animation: 'rotateX',
closeAnimation: 'rotateX'
});
});
</script>
<button class="example19-a-5 btn btn-primary">rotateXR</button>
<script type="text/javascript">
$('.example19-a-5').on('click', function () {
$.confirm({
animation: 'rotateXR',
closeAnimation: 'rotateXR'
});
});
</script>
<div class="space10"></div>
<p>2D animations: (animateFromElement disabled)</p>
<button class="example16 btn btn-primary">right</button>
<script type="text/javascript">
$('.example16').on('click', function () {
$.confirm({
animation: 'right',
closeAnimation: 'right',
animateFromElement: false,
});
});
</script>
Expand All @@ -310,6 +363,7 @@ <h2>Open/Close Animations</h2>
$.confirm({
animation: 'left',
closeAnimation: 'left',
animateFromElement: false,
});
});
</script>
Expand All @@ -318,7 +372,8 @@ <h2>Open/Close Animations</h2>
$('.example18').on('click', function () {
$.confirm({
animation: 'bottom',
closeAnimation: 'bottom'
closeAnimation: 'bottom',
animateFromElement: false,
});
});
</script>
Expand All @@ -327,7 +382,8 @@ <h2>Open/Close Animations</h2>
$('.example19').on('click', function () {
$.confirm({
animation: 'top',
closeAnimation: 'top'
closeAnimation: 'top',
animateFromElement: false,
});
});
</script>
Expand All @@ -336,7 +392,8 @@ <h2>Open/Close Animations</h2>
$('.example11').on('click', function () {
$.confirm({
animation: 'Rotate',
closeAnimation: 'Rotate'
closeAnimation: 'Rotate',
animateFromElement: false,
});
});
</script>
Expand All @@ -345,6 +402,7 @@ <h2>Open/Close Animations</h2>
$('.example12').on('click', function () {
$.confirm({
animation: 'none',
animateFromElement: false,
});
});
</script>
Expand All @@ -354,17 +412,19 @@ <h2>Open/Close Animations</h2>
$.confirm({
animation: 'opacity',
closeAnimation: 'opacity',
animateFromElement: false,
});
});
</script>
<div class="space10"></div>
<p>3D animations:</p>
<p>3D animations: (animateFromElement disabled)</p>
<button class="example15 btn btn-primary">scale (default)</button>
<script type="text/javascript">
$('.example15').on('click', function () {
$.confirm({
animation: 'scale',
closeAnimation: 'scale'
closeAnimation: 'scale',
animateFromElement: false,
});
});
</script>
Expand All @@ -373,7 +433,8 @@ <h2>Open/Close Animations</h2>
$('.example14').on('click', function () {
$.confirm({
animation: 'zoom',
closeAnimation: 'zoom'
closeAnimation: 'zoom',
animateFromElement: false,
});
});
</script>
Expand All @@ -382,7 +443,8 @@ <h2>Open/Close Animations</h2>
$('.example7').on('click', function () {
$.confirm({
animation: 'scaleY',
closeAnimation: 'scaleY'
closeAnimation: 'scaleY',
animateFromElement: false,
})
});
</script>
Expand All @@ -391,7 +453,8 @@ <h2>Open/Close Animations</h2>
$('.example8').on('click', function () {
$.confirm({
animation: 'scaleX',
closeAnimation: 'scaleX'
closeAnimation: 'scaleX',
animateFromElement: false,
})
});
</script>
Expand All @@ -400,7 +463,8 @@ <h2>Open/Close Animations</h2>
$('.example9').on('click', function () {
$.confirm({
animation: 'rotateY',
closeAnimation: 'rotateY'
closeAnimation: 'rotateY',
animateFromElement: false,
});
});
</script>
Expand All @@ -409,7 +473,8 @@ <h2>Open/Close Animations</h2>
$('.example9-2').on('click', function () {
$.confirm({
animation: 'rotateYR',
closeAnimation: 'rotateYR'
closeAnimation: 'rotateYR',
animateFromElement: false,
});
});
</script>
Expand All @@ -418,7 +483,8 @@ <h2>Open/Close Animations</h2>
$('.example10').on('click', function () {
$.confirm({
animation: 'rotateX',
closeAnimation: 'rotateX'
closeAnimation: 'rotateX',
animateFromElement: false,
});
});
</script>
Expand All @@ -427,7 +493,8 @@ <h2>Open/Close Animations</h2>
$('.example10-2').on('click', function () {
$.confirm({
animation: 'rotateXR',
closeAnimation: 'rotateXR'
closeAnimation: 'rotateXR',
animateFromElement: false,
});
});
</script>
Expand Down Expand Up @@ -659,10 +726,10 @@ <h2>Background dismiss animation</h2>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
Expand Down

0 comments on commit 5bf22bb

Please sign in to comment.