Заменены некоторые анимации

korzhanov · Apr 15, 2021 · 1ffa8cb · 1ffa8cb
1 parent 8887a2a
commit 1ffa8cb
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 35 deletions.
diff --git a/popup.css b/popup.css
@@ -145,9 +145,9 @@ a .black:hover {
     color: rgb(0, 107, 121);
 }
 
-.scale-in-ver-center {
-    -webkit-animation: scale-in-ver-center .5s cubic-bezier(.25, .46, .45, .94) both;
-    animation: scale-in-ver-center .5s cubic-bezier(.25, .46, .45, .94) both
+.slide-in-bottom {
+	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+	        animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
 
 .flip-in-ver-right {
@@ -164,35 +164,31 @@ a .black:hover {
     -webkit-animation: tracking-out-contract .3s cubic-bezier(.55, .085, .68, .53) both;
     animation: tracking-out-contract .3s cubic-bezier(.55, .085, .68, .53) both
 }
-
-@-webkit-keyframes scale-in-ver-center {
+@-webkit-keyframes slide-in-bottom {
     0% {
-        -webkit-transform: scaleY(0);
-        transform: scaleY(0);
-        opacity: 1
+      -webkit-transform: translateY(1000px);
+              transform: translateY(1000px);
+      opacity: 0;
     }
-
     100% {
-        -webkit-transform: scaleY(1);
-        transform: scaleY(1);
-        opacity: 1
+      -webkit-transform: translateY(0);
+              transform: translateY(0);
+      opacity: 1;
     }
-}
-
-@keyframes scale-in-ver-center {
+  }
+  @keyframes slide-in-bottom {
     0% {
-        -webkit-transform: scaleY(0);
-        transform: scaleY(0);
-        opacity: 1
+      -webkit-transform: translateY(1000px);
+              transform: translateY(1000px);
+      opacity: 0;
     }
-
     100% {
-        -webkit-transform: scaleY(1);
-        transform: scaleY(1);
-        opacity: 1
+      -webkit-transform: translateY(0);
+              transform: translateY(0);
+      opacity: 1;
     }
-}
-
+  }
+  
 @-webkit-keyframes flip-in-ver-right {
     0% {
         -webkit-transform: rotateY(-80deg);

diff --git a/popup.html b/popup.html
@@ -4,27 +4,29 @@
 <head>
     <meta charset="utf-8">
     <title>Привет, это Навальный-Информер!</title>
-    <link rel="stylesheet" href="popup.css" >
+    <link rel="stylesheet" href="popup.css">
 </head>
 
 <body>
     <div class="modal-header">
-        <h3 class="italic tracking-in-expand">Привет,<br> это Навальный! </h3>
+        <h3 class="italic tracking-in-expand">Привет,<br> это Навальный!</h3>
     </div>
     <div class="modal-body">
         <a target="_blank"
             href="https://free.navalny.com/?utm_source=chrome_extention&utm_medium=navalny_informer&utm_campaign=freenavalny">
             <div id="main_campain" class="div-c">
                 <div id="main_campain_big_digit_wrap" class="div-c1 title black italic">
-                    <div id="main_campain_big_digit" class="tracking-in-expand"><div class="loader">Загрузка...</div></div>
+                    <div id="main_campain_big_digit" class="tracking-in-expand">
+                        <!-- <div class="loader">Загрузка...</div> -->
+                    </div>
                 </div>
-                <div class="div-c2 italic">
-                    <div class=" title black tracking-in-expand">УЧАСТВУЮТ В ПРОТЕСТАХ</div>
-                    <div class=" title target tracking-in-expand">НАША ЦЕЛЬ — 500 000</div>
+                <div class="div-c2 italic tracking-in-expand">
+                    <div class=" title black">УЧАСТВУЮТ В ПРОТЕСТАХ</div>
+                    <div class=" title target ">НАША ЦЕЛЬ — 500 000</div>
                 </div>
             </div>
         </a>
-        <div id="contents" class="flip-in-ver-right scale-in-ver-center">
+        <div id="contents" class="">
             <h3 class="content-title">Штабы.Главное </h3>
             <div id="newsList" class="">
                 <a class="posts flip-in-ver-right" target="_blank" href="https://shtab.navalny.com/news?utm_source=chrome_extention&utm_medium=navalny_informer&utm_campaign=freenavalny" title="Загрузка...">
@@ -53,7 +55,7 @@ <h5>${result.title}</h5>
             <h3 class="content-title">Штабы.Видео </h3>
             <div id="videoList" class="">
                 <div class="videos">
-                    <div class="loader">Загрузка...</div>
+                    <!-- <div class="loader">Загрузка...</div> -->
                     <!-- <div class="media">
                         <img
                             src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22450%22%20viewBox%3D%220%200%20800%20450%22%3E%20%3Crect%20fill%3D%22%230F1C3F%22%20width%3D%22800%22%20height%3D%22450%22%2F%3E%20%3Ctext%20fill%3D%22%237FDBFF%22%20font-family%3D%22sans-serif%22%20font-size%3D%2290%22%20dy%3D%2231.499999999999996%22%20font-weight%3D%22bold%22%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%3EH%3C%2Ftext%3E%20%3C%2Fsvg%3E">
@@ -64,7 +66,7 @@ <h3 class="content-title">Штабы.Видео </h3>
             </div>
             <h3 class="content-title">Navalny.Shop </h3>
             <div id="shopList" class="">
-                    <div class="loader">Загрузка...</div>
+                    <!-- <div class="loader">Загрузка...</div> -->
                 <div class="items">
                     <!-- <div class="media">
                         <img

diff --git a/popup.js b/popup.js
@@ -63,8 +63,8 @@ function showcontent() {
                 let pubdate = new Date(result.pubdate).toLocaleString("ru",{month: 'long',day: 'numeric'});
                 switch (item) {
                     case "posts":
-                        block += `<a class="posts flip-in-ver-right" target="_blank" href="https://shtab.navalny.com/hq/${hq_slug}/${id}?utm_source=chrome_extention&utm_medium=navalny_informer&utm_campaign=freenavalny" title="${annotation}">
-                                    <div class="media">
+                        block += `<a class="posts" target="_blank" href="https://shtab.navalny.com/hq/${hq_slug}/${id}?utm_source=chrome_extention&utm_medium=navalny_informer&utm_campaign=freenavalny" title="${annotation}">
+                                    <div class="media slide-in-bottom">
                                     <img src="${image}">
                                     </div>
                                     <div class="content">