Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
im-changing.ru
/
converse.js
-ын хуулбар https://github.com/conversejs/converse.js.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Fade in logo after a delay

JC Brand 6 жил өмнө
parent
cfcab80147
commit
d89a47b071
3 өөрчлөгдсөн 22 нэмэгдсэн , 2 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 13 1
      css/converse.css
  2. 5 1
      fullscreen.html
  3. 4 0
      sass/_core.scss

+ 13 - 1
css/converse.css
Файл харах 

@@ -8633,7 +8633,19 @@ body.reset {
 
 
 .converse-brand {
 
   display: flex;
 
-  justify-content: space-between; }
 
+  justify-content: space-between;
 
+  -webkit-animation-name: fadein;
 
+  -moz-animation-name: fadein;
 
+  animation-name: fadein;
 
+  -webkit-animation-fill-mode: forwards;
 
+  -moz-animation-fill-mode: forwards;
 
+  animation-fill-mode: forwards;
 
+  -webkit-animation-duration: 750ms;
 
+  -moz-animation-duration: 750ms;
 
+  animation-duration: 750ms;
 
+  -webkit-animation-timing-function: ease;
 
+  -moz-animation-timing-function: ease;
 
+  animation-timing-function: ease; }
 
 
 .converse-brand__padding {
 
   position: relative;

+ 5 - 1
fullscreen.html
Файл харах 

@@ -12,7 +12,7 @@
 
     <script src="dist/converse.js"></script>
 
 </head>
 
 <body class="reset">
 
-    <div class="content">
 
+    <div class="converse-content" style="display:none">
 
         <div class="inner-content converse-brand row">
 
             <div class="converse-brand__padding"></div>
 
             <div class="converse-brand__heading">
 
@@ -60,6 +60,10 @@
 
         bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
 
         message_archiving: 'always',
 
         view_mode: 'fullscreen'
 
+    }).then(function () {
 
+        setTimeout(function () {
 
+            document.querySelector('.converse-content').style = '';
 
+        }, 1000);
 
     });
 
 </script>
 
 </body>

+ 4 - 0
sass/_core.scss
Файл харах 

@@ -43,6 +43,10 @@ body.reset {
 
 .converse-brand {
 
     display: flex;
 
     justify-content: space-between;
 
+    @include animation-name(fadein);
 
+    @include animation-fill-mode(forwards);
 
+    @include animation-duration(750ms);
 
+    @include animation-timing-function(ease);
 
 }
 
 
 .converse-brand__padding {