style: 增加agree未勾选时的提示动画

Tencent · Sep 10, 2019 · 33af94c · 33af94c
1 parent 91a31aa
commit 33af94c
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 36 deletions.
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -910,8 +910,8 @@ <h2 class="weui-form__title">表单页标题</h2>
       </div>
     </div>
     <div class="weui-form__tips-area">
-      <label for="weuiAgree" class="weui-agree">
-        <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《相关条款》</a>
+      <label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree">
+        <input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《相关条款》</a>
         </span>
       </label>
     </div>
@@ -959,35 +959,38 @@ <h2 class="weui-form__title">表单页标题</h2>
       var $tooltips = $('.js_tooltips');
       var $toast = $('#js_toast');
       var $input = $('#js_input');
-      var $agree = $('#weuiAgree');
+      var $agree= $('#weuiAgree');
+      var $agreeCheckbox = $('#weuiAgreeCheckbox');
 
-      $agree.on('change', function(){
+      $input.on('input', function(){
         var $value = $input.val();
-        var flag = false;
-
-        if ($value && $(this).prop("checked")){
-          flag = true;
-        }else{
-          flag = false;
-        }
-        if (flag){
+        if ($value){
           $('#showTooltips').removeClass('weui-btn_disabled');
         }else{
           $('#showTooltips').addClass('weui-btn_disabled');
         }
       });
 
+      //$agreeCheckbox.on('change', function(){
+      //});
+
       $('#showTooltips').on('click', function(){
         if ($(this).hasClass('weui-btn_disabled')) return;
         if ($tooltips.css('display') != 'none') return;
-
+        if ($agree.hasClass('weui-checkbox-animate')){
+          $agree.removeClass('weui-checkbox-animate');
+        }
         // toptips的fixed, 如果有`animation`, `position: fixed`不生效
         $('.page.cell').removeClass('slideIn');
 
-        $toast.fadeIn(100);
-        setTimeout(function () {
-          $toast.fadeOut(100);
-        }, 2000);
+        if($agreeCheckbox.prop("checked")){
+          $toast.fadeIn(100);
+          setTimeout(function () {
+            $toast.fadeOut(100);
+          }, 2000);
+        }else{
+          $agree.addClass('weui-agree_animate');
+        }
       });
 
       var $iosDialog1 = $('#iosDialog1');

diff --git a/dist/style/weui.css b/dist/style/weui.css
diff --git a/dist/style/weui.min.css b/dist/style/weui.min.css
diff --git a/src/example/fragment/form_vcode.html b/src/example/fragment/form_vcode.html
@@ -30,8 +30,8 @@ <h2 class="weui-form__title">表单页标题</h2>
       </div>
     </div>
     <div class="weui-form__tips-area">
-      <label for="weuiAgree" class="weui-agree">
-        <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《相关条款》</a>
+      <label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree">
+        <input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《相关条款》</a>
         </span>
       </label>
     </div>
@@ -79,35 +79,38 @@ <h2 class="weui-form__title">表单页标题</h2>
       var $tooltips = $('.js_tooltips');
       var $toast = $('#js_toast');
       var $input = $('#js_input');
-      var $agree = $('#weuiAgree');
+      var $agree= $('#weuiAgree');
+      var $agreeCheckbox = $('#weuiAgreeCheckbox');
 
-      $agree.on('change', function(){
+      $input.on('input', function(){
         var $value = $input.val();
-        var flag = false;
-
-        if ($value && $(this).prop("checked")){
-          flag = true;
-        }else{
-          flag = false;
-        }
-        if (flag){
+        if ($value){
           $('#showTooltips').removeClass('weui-btn_disabled');
         }else{
           $('#showTooltips').addClass('weui-btn_disabled');
         }
       });
 
+      //$agreeCheckbox.on('change', function(){
+      //});
+
       $('#showTooltips').on('click', function(){
         if ($(this).hasClass('weui-btn_disabled')) return;
         if ($tooltips.css('display') != 'none') return;
-
+        if ($agree.hasClass('weui-checkbox-animate')){
+          $agree.removeClass('weui-checkbox-animate');
+        }
         // toptips的fixed, 如果有`animation`, `position: fixed`不生效
         $('.page.cell').removeClass('slideIn');
 
-        $toast.fadeIn(100);
-        setTimeout(function () {
-          $toast.fadeOut(100);
-        }, 2000);
+        if($agreeCheckbox.prop("checked")){
+          $toast.fadeIn(100);
+          setTimeout(function () {
+            $toast.fadeOut(100);
+          }, 2000);
+        }else{
+          $agree.addClass('weui-agree_animate');
+        }
       });
 
       var $iosDialog1 = $('#iosDialog1');

diff --git a/src/style/widget/weui-agree/weui-agree.less b/src/style/widget/weui-agree/weui-agree.less
@@ -56,3 +56,40 @@
         }
     }
 }
+.weui-agree_animate{
+  animation:weuiAgree 1s;
+}
+@keyframes weuiAgree {
+  0% {
+    transform: translateX(0%);
+  }
+
+  16% {
+    transform: translateX(-132.27%);
+  }
+
+  28% {
+    transform: translateX(-86.88%);
+  }
+
+  44% {
+    transform: translateX(-104.63%);
+  }
+
+  59% {
+    transform: translateX(-98.36%);
+  }
+
+  73% {
+    transform: translateX(-100.58%);
+  }
+
+  88% {
+    transform: translateX(-99.8%);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+
+}