Skip to content

Commit 77087fb

Browse files
GodofbrowserGodofbrowser
committed
Added ability to choose dialog's animation.
1 parent e930ac3 commit 77087fb

File tree

7 files changed

+85
-49
lines changed

7 files changed

+85
-49
lines changed

‎dist/vuejs-dialog.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/app.main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>VueJs Plugin usage example</title>
6-
<link href="app.main.css?956e764b691c9685ece1" rel="stylesheet"></head>
6+
<link href="app.main.css?11ee61d2c63f5bd8ebbf" rel="stylesheet"></head>
77
<body>
88
<div id="app"></div>
99

1010
<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
1111
<script type="text/javascript" src="../dist/vuejs-dialog.min.js"></script>
12-
<script type="text/javascript" src="app.main.js?956e764b691c9685ece1"></script></body>
12+
<script type="text/javascript" src="app.main.js?11ee61d2c63f5bd8ebbf"></script></body>
1313
</html>

‎src/example/components/app.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@
2222
<button @click="showReversedDialog()">Reversed Dialog - switch buttons</button>
2323
</h3>
2424

25+
<h3>
26+
<button @click="showAnimationFadeDialog()">Fade Dialog - Animation</button>
27+
</h3>
28+
29+
<h3>
30+
<button @click="showAnimationBounceDialog()">Bounce Dialog - Animation</button>
31+
</h3>
32+
2533

2634

2735
<notifications position="bottom left"></notifications>
@@ -52,6 +60,12 @@
5260
showHtmlDialog(){
5361
this.$dialog.alert(trans('messages.html'), {html: true, okText: 'Dismiss'})
5462
},
63+
showAnimationBounceDialog(){
64+
this.$dialog.alert(trans('messages.html'), {html: true, animation: 'bounce'})
65+
},
66+
showAnimationFadeDialog(){
67+
this.$dialog.alert(trans('messages.html'), {html: true, animation: 'fade'})
68+
},
5569
5670
showLoadingDialog(item = 'foo'){
5771
this.$dialog.confirm(trans('messages.loading'), {

‎src/plugin/components/dialog-window.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<transition name="zoomIn" appear="" @after-leave="anmiationEnded">
3+
<transition :name="animation" appear="" @after-leave="anmiationEnded">
44
<div v-if="show" ref="container" class="dg-container">
55
<div class="dg-content-cont dg-content-cont--floating">
66
<div class="dg-main-content">
@@ -37,7 +37,7 @@
3737
<script>
3838
import OkBtn from './ok-btn.vue'
3939
import CancelBtn from './cancel-btn.vue'
40-
import {DIALOG_TYPES} from '../js/constants'
40+
import {DIALOG_TYPES, ANIMATION_TYPES} from '../js/constants'
4141
4242
export default {
4343
data: function () {
@@ -54,6 +54,12 @@
5454
}
5555
},
5656
computed: {
57+
animation(){
58+
let a = this.options.animation.toUpperCase()
59+
return ANIMATION_TYPES.hasOwnProperty(a)
60+
? ANIMATION_TYPES[a]
61+
: ANIMATION_TYPES.ZOOM
62+
},
5763
loaderEnabled(){
5864
return !!this.options.loader
5965
},

‎src/plugin/js/constants.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ export const CONFIRM_TYPES = {
1111
HARD: 'hard' // ex: enter verification, then click to confirm
1212
}
1313

14+
export const ANIMATION_TYPES = {
15+
FADE: 'dg-fade',
16+
ZOOM: 'dg-zoom',
17+
BOUNCE: 'dg-bounce'
18+
}
19+
1420
export const DEFAULT_OPTIONS = {
1521
html : false,
1622
loader : false,
@@ -23,5 +29,6 @@ export const DEFAULT_OPTIONS = {
2329
message : "Proceed with the request?",
2430
helpText : "Click the proceed button to continue",
2531
clickCount : 3,
32+
animation : 'zoomIn',
2633
verification : 'continue'
2734
}

‎src/plugin/styles/_animations.css‎

Lines changed: 52 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/* Transitions */
2-
.fade-enter-active {
2+
.fadeTr-enter-active {
33
transition: opacity 0.3s ease-in;
44
transition-delay: 0.1s;
55
}
66

7-
.fade-leave-active {
7+
.fadeTr-leave-active {
88
transition: opacity 0.1s ease-out;
99
}
1010

11-
.fade-enter, .fade-leave-to {
11+
.fadeTr-enter, .fadeTr-leave-to {
1212
opacity: 0;
1313
}
1414

@@ -23,15 +23,31 @@
2323
transform: translateX(30px);
2424
}
2525

26+
.dg-fade-enter-active {
27+
animation: dg-fadeIn .6s;
28+
}
29+
30+
.dg-fade-leave-active {
31+
animation: dg-fadeOut .5s;
32+
}
2633

27-
.zoomIn-enter-active {
28-
animation: zoomIn .3s;
34+
@keyframes dg-fadeIn {
35+
0% {opacity: 0;}
36+
100% {opacity: 1;}
2937
}
30-
.zoomIn-leave-active {
31-
animation: zoomOut .3s;
38+
@keyframes dg-fadeOut {
39+
0% {opacity: 1;}
40+
100% {opacity: 0;}
3241
}
3342

34-
@keyframes zoomIn {
43+
.dg-zoom-enter-active {
44+
animation: dg-zoomIn .3s;
45+
}
46+
.dg-zoom-leave-active {
47+
animation: dg-zoomOut .3s;
48+
}
49+
50+
@keyframes dg-zoomIn {
3551
0% {
3652
opacity: 0;
3753
-webkit-transform: scale3d(.3, .3, .3);
@@ -42,7 +58,7 @@
4258
opacity: 1;
4359
}
4460
}
45-
@keyframes zoomOut {
61+
@keyframes dg-zoomOut {
4662
0% {
4763
opacity: 1;
4864
}
@@ -59,50 +75,43 @@
5975
}
6076

6177

62-
.bounceIn-enter-active {
63-
animation: bounceIn 1.2s;
78+
.dg-bounce-enter-active {
79+
animation: dg-bounceIn .6s;
6480
}
65-
.bounceIn-leave-active {
66-
animation: bounceIn 1.2s reverse;
81+
.dg-bounce-leave-active {
82+
animation: dg-bounceOut .6s;
6783
}
6884

69-
@keyframes bounceIn {
70-
0%, 20%, 40%, 60%, 80%, 100% {
71-
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
72-
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
73-
}
74-
75-
0% {
85+
@keyframes dg-bounceIn {
86+
0%{
7687
opacity: 0;
77-
-webkit-transform: scale3d(.3, .3, .3);
78-
transform: scale3d(.3, .3, .3);
88+
transform: scale(.3);
7989
}
80-
81-
20% {
82-
-webkit-transform: scale3d(1.1, 1.1, 1.1);
83-
transform: scale3d(1.1, 1.1, 1.1);
90+
40%{
91+
opacity: 1;
92+
transform: scale(1.06);
8493
}
85-
86-
40% {
87-
-webkit-transform: scale3d(.9, .9, .9);
88-
transform: scale3d(.9, .9, .9);
94+
60%{
95+
transform: scale(0.92);
8996
}
90-
91-
60% {
92-
opacity: 1;
93-
-webkit-transform: scale3d(1.03, 1.03, 1.03);
94-
transform: scale3d(1.03, 1.03, 1.03);
97+
100%{
98+
transform: scale(1.0);
9599
}
96-
97-
80% {
98-
-webkit-transform: scale3d(.97, .97, .97);
99-
transform: scale3d(.97, .97, .97);
100+
}
101+
@keyframes dg-bounceOut {
102+
0% {
103+
transform: scale(1);
100104
}
101-
102-
100% {
105+
25% {
106+
transform: scale(.95);
107+
}
108+
50% {
103109
opacity: 1;
104-
-webkit-transform: scale3d(1, 1, 1);
105-
transform: scale3d(1, 1, 1);
110+
transform: scale(1.1);
111+
}
112+
100% {
113+
opacity: 0;
114+
transform: scale(.3);
106115
}
107116
}
108117

0 commit comments

Comments
 (0)