Browse Source

fix transition styles

Tati 9 năm trước cách đây
mục cha
commit
13003d1a1b
2 tập tin đã thay đổi với 13 bổ sung14 xóa
  1. 7 7
      client/css/styles.css
  2. 6 7
      client/js/binders.js

+ 7 - 7
client/css/styles.css

@@ -31,17 +31,17 @@
     src: url('../fonts/Angelface.otf');
 }
 
-.hidden {
-    display: none;
+section[rv-transition] {
+    opacity: 0;
+    transition: opacity 400ms ease;
 }
 
-.transition {
-    opacity: 0;
-    transition: ease 200ms opacity;
+.hide {
+    display: none;
 }
 
-.transition.show {
-    opacity: 1;
+.show {
+    opacity: 1!important;
 }
 
 body {

+ 6 - 7
client/js/binders.js

@@ -6,17 +6,16 @@ rivets.binders['src-strict'] = function(el, value) {
     img.src = value
 }
 
-rivets.binders['transition'] = function(el, value) {
-    el.classList.add('transition');
-    if (value) {
-        el.classList.remove('hidden');
+rivets.binders['transition'] = function(el, display) {
+    if (display) {
+        el.classList.remove('hide');
         setTimeout(function() {
             el.classList.add('show');
-        }, 100);
+        }, 0);
     } else {
         el.classList.remove('show');
         setTimeout(function() {
-            el.classList.add('hidden');
-        }, 250);
+           el.classList.add('hide'); 
+        }, 200);
     }
 }