Explorar o código

Add some animations

Amauri CHAMPEAUX %!s(int64=4) %!d(string=hai) anos
pai
achega
ba79735d36
Modificáronse 2 ficheiros con 23 adicións e 1 borrados
  1. 4 0
      css/tarteaucitron.css
  2. 19 1
      tarteaucitron.js

+ 4 - 0
css/tarteaucitron.css

@@ -19,6 +19,10 @@
     text-align: initial;
     text-shadow: initial;
 }
+
+/* Animation */
+#tarteaucitronRoot * {transition: border 300ms, background 300ms, opacity 200ms, box-shadow 400ms}
+
 /* HTML5 display-role reset for older browsers */
 #tarteaucitronRoot article, #tarteaucitronRoot aside, #tarteaucitronRoot details, #tarteaucitronRoot figcaption, #tarteaucitronRoot figure, #tarteaucitronRoot footer, #tarteaucitronRoot header, #tarteaucitronRoot hgroup, #tarteaucitronRoot menu, #tarteaucitronRoot nav, #tarteaucitronRoot section {
     display: block;

+ 19 - 1
tarteaucitron.js

@@ -805,7 +805,25 @@ var tarteaucitron = {
         "css": function (id, property, value) {
             "use strict";
             if (document.getElementById(id) !== null) {
-                document.getElementById(id).style[property] = value;
+
+                if (property == "display" && value == "none" && (id == "tarteaucitron" || id == "tarteaucitronBack" || id == "tarteaucitronAlertBig")) {
+                    document.getElementById(id).style["opacity"] = "0";
+
+                    setTimeout(function() {document.getElementById(id).style[property] = value;}, 200);
+                } else {
+
+                    document.getElementById(id).style[property] = value;
+                    
+                    if (property == "display" && value == "block" && (id == "tarteaucitron" || id == "tarteaucitronAlertBig")) {
+                        document.getElementById(id).style["opacity"] = "0";
+                        setTimeout(function() {document.getElementById(id).style["opacity"] = "1";}, 1);
+                    }
+                    
+                    if (property == "display" && value == "block" && id == "tarteaucitronBack") {
+                        document.getElementById(id).style["opacity"] = "0";
+                        setTimeout(function() {document.getElementById(id).style["opacity"] = "0.7";}, 1);
+                    }
+                }
             }
         },
         "addClass": function (id, className) {