动画效果

resources/sass/animation.css

@@ -30,10 +30,10 @@
 }
 
 .translationRtoL{
-    animation:moveRtoL 500ms infinite;
-    -moz-animation:moveRtoL 500ms infinite; /* Firefox */
-    -webkit-animation:moveRtoL 500ms infinite; /* Safari and Chrome */
-    -o-animation:moveRtoL 500ms infinite;/* Opera */
+    animation:moveRtoL 500ms 1;
+    -moz-animation:moveRtoL 500ms 1; /* Firefox */
+    -webkit-animation:moveRtoL 500ms 1; /* Safari and Chrome */
+    -o-animation:moveRtoL 500ms 1;/* Opera */
 }
 @keyframes moveRtoL { from {left:0;} to {left:-50px;} }
 @-moz-keyframes moveRtoL { from {left:0;} to {left:-50px;} }
@@ -41,10 +41,10 @@
 @-o-keyframes moveRtoL { from {left:0;} to {left:-50px;} }
 
 .translationLtoR{
-    animation:moveLtoR 500ms infinite;
-    -moz-animation:moveLtoR 500ms infinite; /* Firefox */
-    -webkit-animation:moveLtoR 500ms infinite; /* Safari and Chrome */
-    -o-animation:moveLtoR 500ms infinite;/* Opera */
+    animation:moveLtoR 500ms 1;
+    -moz-animation:moveLtoR 500ms 1; /* Firefox */
+    -webkit-animation:moveLtoR 500ms 1; /* Safari and Chrome */
+    -o-animation:moveLtoR 500ms 1;/* Opera */
 }
 @keyframes moveLtoR { from {right:0;} to {right:-50px;} }
 @-moz-keyframes moveLtoR { from {right:0;} to {right:-50px;} }

resources/views/transport/waybill/delivering.blade.php

@@ -1,11 +1,11 @@
 @extends('layouts.app')
 @section('title')发运-运输管理@endsection
-
+@section("head")<link href="{{ mix('css/animation.css') }}" rel="stylesheet">@endsection
 @section('content')
     <div id="list" class="d-none container-fluid mt-2">
         <div class="card" v-for="(waybills,date) in groups">
             <div class="card-header p-0 row" >
-                <div class="text-center" :class="slideStatus[date] ? 'col-8 translationRtoL' : 'col-12 translationLtoR'" @click="selectedHeader(date)" @touchstart="startSlide()" @touchend="endSlide(date)">
+                <div class="text-center" :class="slideStatus[date] ? 'col-8' : 'col-12'" @click="selectedHeader(date)" @touchstart="startSlide()" @touchend="endSlide(date)">
                     @{{ date }}<i class="fa mr-2 pull-right" :class="header[date] ? 'fa-angle-down' : 'fa-angle-right'"></i>
                 </div>
                 <div class="col-4 bg-white" :class="slideStatus[date] ? '' : 'd-none'">
@@ -150,17 +150,25 @@
                 let x = event.changedTouches[0].pageX - this.coordinate.x;
                 let y = event.changedTouches[0].pageY - this.coordinate.y;
                 if (Math.abs(x) > Math.abs(y)) {
-                    if (x>0)this.lToR(date);
-                    else this.rToL(date);
+                    if (x>0)this.lToR(date,event.target);
+                    else this.rToL(date,event.target);
                 }
             },
-            rToL(date){
+            rToL(date,element){
                 if (this.slideStatus[date])return;
-                this.$set(this.slideStatus,date,true);
+                element.classList.add('translationRtoL');
+                setTimeout(()=>{
+                    element.classList.remove('translationRtoL');
+                    this.$set(this.slideStatus,date,true);
+                },400);
             },
-            lToR(date){
+            lToR(date,element){
                 if (!this.slideStatus[date])return;
-                this.$set(this.slideStatus,date,false);
+                element.classList.add('translationLtoR');
+                setTimeout(()=>{
+                    element.classList.remove('translationLtoR');
+                    this.$set(this.slideStatus,date,false);
+                },400);
             },
             selectedHeader(date){
                 if (this.header[date]===undefined)this.loadData(date);