Merge pull request #233 from PikadudeNo1/animation-fill-mode

Set animation-fill-mode to fix .vex-closing flashing in IE 11
HubSpot · Aug 29, 2017 · 61f7c4c · 61f7c4c
2 parents 104a60a + cfbfca8
commit 61f7c4c
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 42 deletions.
diff --git a/dist/css/vex-theme-bottom-right-corner.css b/dist/css/vex-theme-bottom-right-corner.css
@@ -296,11 +296,11 @@
   .vex.vex-theme-bottom-right-corner .vex-overlay {
     display: none; }
   .vex.vex-theme-bottom-right-corner.vex-closing .vex-content {
-    animation: vex-slidedown 0.5s;
-    -webkit-animation: vex-slidedown 0.5s;
-    -moz-animation: vex-slidedown 0.5s;
-    -ms-animation: vex-slidedown 0.5s;
-    -o-animation: vex-slidedown 0.5s;
+    animation: vex-slidedown 0.5s forwards;
+    -webkit-animation: vex-slidedown 0.5s forwards;
+    -moz-animation: vex-slidedown 0.5s forwards;
+    -ms-animation: vex-slidedown 0.5s forwards;
+    -o-animation: vex-slidedown 0.5s forwards;
     -webkit-backface-visibility: hidden; }
   .vex.vex-theme-bottom-right-corner .vex-content {
     animation: vex-slideup 0.5s;

diff --git a/dist/css/vex-theme-default.css b/dist/css/vex-theme-default.css
@@ -232,11 +232,11 @@
   padding-top: 160px;
   padding-bottom: 160px; }
   .vex.vex-theme-default.vex-closing .vex-content {
-    animation: vex-flyout 0.5s;
-    -webkit-animation: vex-flyout 0.5s;
-    -moz-animation: vex-flyout 0.5s;
-    -ms-animation: vex-flyout 0.5s;
-    -o-animation: vex-flyout 0.5s;
+    animation: vex-flyout 0.5s forwards;
+    -webkit-animation: vex-flyout 0.5s forwards;
+    -moz-animation: vex-flyout 0.5s forwards;
+    -ms-animation: vex-flyout 0.5s forwards;
+    -o-animation: vex-flyout 0.5s forwards;
     -webkit-backface-visibility: hidden; }
   .vex.vex-theme-default .vex-content {
     animation: vex-flyin 0.5s;

diff --git a/dist/css/vex-theme-flat-attack.css b/dist/css/vex-theme-flat-attack.css
@@ -169,11 +169,11 @@
   padding-bottom: 100px;
   font-size: 1.5em; }
   .vex.vex-theme-flat-attack.vex-closing .vex-content {
-    animation: vex-flipout-horizontal 0.5s;
-    -webkit-animation: vex-flipout-horizontal 0.5s;
-    -moz-animation: vex-flipout-horizontal 0.5s;
-    -ms-animation: vex-flipout-horizontal 0.5s;
-    -o-animation: vex-flipout-horizontal 0.5s;
+    animation: vex-flipout-horizontal 0.5s forwards;
+    -webkit-animation: vex-flipout-horizontal 0.5s forwards;
+    -moz-animation: vex-flipout-horizontal 0.5s forwards;
+    -ms-animation: vex-flipout-horizontal 0.5s forwards;
+    -o-animation: vex-flipout-horizontal 0.5s forwards;
     -webkit-backface-visibility: hidden; }
   .vex.vex-theme-flat-attack .vex-content {
     -webkit-transform-style: preserve-3d;

diff --git a/dist/css/vex-theme-os.css b/dist/css/vex-theme-os.css
@@ -232,11 +232,11 @@
   padding-top: 160px;
   padding-bottom: 160px; }
   .vex.vex-theme-os.vex-closing .vex-content {
-    animation: vex-flyout 0.5s;
-    -webkit-animation: vex-flyout 0.5s;
-    -moz-animation: vex-flyout 0.5s;
-    -ms-animation: vex-flyout 0.5s;
-    -o-animation: vex-flyout 0.5s;
+    animation: vex-flyout 0.5s forwards;
+    -webkit-animation: vex-flyout 0.5s forwards;
+    -moz-animation: vex-flyout 0.5s forwards;
+    -ms-animation: vex-flyout 0.5s forwards;
+    -o-animation: vex-flyout 0.5s forwards;
     -webkit-backface-visibility: hidden; }
   .vex.vex-theme-os .vex-content {
     animation: vex-flyin 0.5s;

diff --git a/dist/css/vex-theme-top.css b/dist/css/vex-theme-top.css
@@ -289,11 +289,11 @@
     box-shadow: inset 0 0 0 300px transparent; } }
 
 .vex.vex-theme-top.vex-closing .vex-content {
-  animation: vex-dropout 0.5s;
-  -webkit-animation: vex-dropout 0.5s;
-  -moz-animation: vex-dropout 0.5s;
-  -ms-animation: vex-dropout 0.5s;
-  -o-animation: vex-dropout 0.5s;
+  animation: vex-dropout 0.5s forwards;
+  -webkit-animation: vex-dropout 0.5s forwards;
+  -moz-animation: vex-dropout 0.5s forwards;
+  -ms-animation: vex-dropout 0.5s forwards;
+  -o-animation: vex-dropout 0.5s forwards;
   -webkit-backface-visibility: hidden; }
 
 .vex.vex-theme-top .vex-content {

diff --git a/dist/css/vex.css b/dist/css/vex.css
@@ -171,11 +171,11 @@
   left: 0; }
 
 .vex-overlay.vex-closing {
-  animation: vex-fadeout 0.5s;
-  -webkit-animation: vex-fadeout 0.5s;
-  -moz-animation: vex-fadeout 0.5s;
-  -ms-animation: vex-fadeout 0.5s;
-  -o-animation: vex-fadeout 0.5s;
+  animation: vex-fadeout 0.5s forwards;
+  -webkit-animation: vex-fadeout 0.5s forwards;
+  -moz-animation: vex-fadeout 0.5s forwards;
+  -ms-animation: vex-fadeout 0.5s forwards;
+  -o-animation: vex-fadeout 0.5s forwards;
   -webkit-backface-visibility: hidden; }
 
 .vex-content {
@@ -188,11 +188,11 @@
   background: #fff; }
 
 .vex.vex-closing .vex-content {
-  animation: vex-fadeout 0.5s;
-  -webkit-animation: vex-fadeout 0.5s;
-  -moz-animation: vex-fadeout 0.5s;
-  -ms-animation: vex-fadeout 0.5s;
-  -o-animation: vex-fadeout 0.5s;
+  animation: vex-fadeout 0.5s forwards;
+  -webkit-animation: vex-fadeout 0.5s forwards;
+  -moz-animation: vex-fadeout 0.5s forwards;
+  -ms-animation: vex-fadeout 0.5s forwards;
+  -o-animation: vex-fadeout 0.5s forwards;
   -webkit-backface-visibility: hidden; }
 
 .vex-close:before {

diff --git a/sass/vex-theme-bottom-right-corner.sass b/sass/vex-theme-bottom-right-corner.sass
@@ -17,7 +17,7 @@ $blue: #3288e6
         display: none
 
     &.vex-closing .vex-content
-        +vex-animation(vex-slidedown .5s)
+        +vex-animation(vex-slidedown .5s forwards)
 
     .vex-content
         +vex-animation(vex-slideup .5s)

diff --git a/sass/vex-theme-default.sass b/sass/vex-theme-default.sass
@@ -12,7 +12,7 @@ $blue: #3288e6
     padding-bottom: 160px
 
     &.vex-closing .vex-content
-        +vex-animation(vex-flyout .5s)
+        +vex-animation(vex-flyout .5s forwards)
 
     .vex-content
         +vex-animation(vex-flyin .5s)

diff --git a/sass/vex-theme-flat-attack.sass b/sass/vex-theme-flat-attack.sass
@@ -33,7 +33,7 @@ $blue: #477FA5
     font-size: 1.5em
 
     &.vex-closing .vex-content
-        +vex-animation(vex-flipout-horizontal .5s)
+        +vex-animation(vex-flipout-horizontal .5s forwards)
 
     .vex-content
         +vex-preserve-3d

diff --git a/sass/vex-theme-os.sass b/sass/vex-theme-os.sass
@@ -12,7 +12,7 @@ $blue: #3288e6
     padding-bottom: 160px
 
     &.vex-closing .vex-content
-        +vex-animation(vex-flyout .5s)
+        +vex-animation(vex-flyout .5s forwards)
 
     .vex-content
         +vex-animation(vex-flyin .5s)

diff --git a/sass/vex-theme-top.sass b/sass/vex-theme-top.sass
@@ -10,7 +10,7 @@ $blue: #3288e6
 .vex.vex-theme-top
 
     &.vex-closing .vex-content
-        +vex-animation(vex-dropout .5s)
+        +vex-animation(vex-dropout .5s forwards)
 
     .vex-content
         +vex-animation(vex-dropin .5s)

diff --git a/sass/vex.sass b/sass/vex.sass
@@ -43,14 +43,14 @@
     left: 0
 
 .vex-overlay.vex-closing
-    +vex-animation(vex-fadeout .5s)
+    +vex-animation(vex-fadeout .5s forwards)
 
 .vex-content
     +vex-animation(vex-fadein .5s)
     background: #fff
 
 .vex.vex-closing .vex-content
-    +vex-animation(vex-fadeout .5s)
+    +vex-animation(vex-fadeout .5s forwards)
 
 .vex-close:before
     font-family: Arial, sans-serif