VUE如何使用anmate.css

這次給大家帶來VUE如何使用anmate.css，VUE使用anmate.css的注意事項有哪些，下面就是實戰案例，一起來看一下。

注意：

1、在ajax請求到資料後，先給res返回的資料添加屬性anmate = false，千萬不要this.planData = res.lists

然後再給this.planData 便利迴圈添加 anmate 屬性 否則 資料重新整理後 視圖層不重新整理；

2、直接出代碼如下：

</h5><pre><template><div id="JiaoXueJiHuaIndex"><div class="row"><div class="col-md-12"><div :class="{'JiaoXueJiHuaDiv':true,'animated':true,'swing':item.anmate}"         v-for="(item,index) in planData"         @mouseover="enter(index,item)" @mouseout="leave(index)"         @click.stop="hrefPlanIfo(item)">      <div class="JiaoXueJiHuaDiv-top">        ![](classImg)      </div>      <div class="JiaoXueJiHuaDiv-bottom">        <h3 style="padding: 0;">{{item.teachPlanName}}</h3>        <p>          ![](../../../../static/img/jiangshi.png)          <span>開始時間:</span>          <span v-text="item.beginTime.substr(0,16)"></span>          <span class="pull-right">共{{item.trainingCycle}}個課</span>        </p>      </div>    </div>    <!--添加-->    <div style="border:none;"         v-if="quanXianFlag == 'manager'" id="addWrap" class=" JiaoXueJiHuaDiv" @click.stop="jumpAddPage">      <div class="JiaoXueJiHuaDiv-top  "           style="height:230px;text-shadow: 3px 3px 3px #999;line-height: 230px;font-size: 60px;text-align: center;">        <Icon  class="rotation"  type="plus-round"              style="font-size:90px;color:#78cddc;"></Icon>      </div>    </div>  </div></div></div></template>//網站原因 無法寫 srcipt 和 style標籤//scriptexport default {name: 'JiaoXueJiHuaIndex',data() {return {   classImg: '../../../../static/img/class_03.jpg',    planData: [],    quanXianFlag: window.sessionStorage.getItem("_quanXian"), //擷取目前使用者是老師還是學生    classMsgLists: [],    show: false  }},methods: {  loadPlanTable() {    const _this = this;    this.$Loading.start();//進度條    $.ajax({      async: true,      type: "POST",      url: '/CRPTP/a/teachplan/teachPlan/teachPlanList',      dataType: "JSON",      success: function (data) {        $.each(data.list, function (index, item) {          item.anmate = false;        });        _this.planData = data.list;        _this.$Loading.finish();      },      error: function () {        _this.$Loading.error();      }    });  },  hrefPlanIfo(item) {    this.$router.push({path: '/plan/JiaoXueJiHuaXx', query: {teachPlanId: item.id}})  },  jumpAddPage(){    this.$router.push({path: '/plan/addTeachingPlan'})  },  enter: function (index, item) {    item.anmate = true;  },  leave: function (index) {    this.planData[index].anmate = false;  }},mounted() {  this.loadPlanTable();}}//style@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}}addWrap:hover .rotation{-webkit-transform: rotate(360deg);animation: rotation 0.5s linear infinite;-moz-animation: rotation 0.5s linear infinite;-webkit-animation: rotation 0.5s linear infinite;-o-animation: rotation 0.5s linear infinite;}JiaoXueJiHuaIndex {overflow: hidden;.JiaoXueJiHuaDiv {  width: 29%;  float: left;  margin: 2%;  box-shadow: 0 0 5px #aaa;  border-bottom: 4px solid #FCAF49;  cursor: pointer;  div.JiaoXueJiHuaDiv-top {    width: 100%;    height: 150px;    box-shadow: 2px 2px 2px #eee;    img.jxjhTitle {      width: 100%;      height: 100%;    }    img.jxjhJqqd {      display: block;      position: relative;      top: 45%;      margin: 0 auto;    }  }  div.JiaoXueJiHuaDiv-top:hover {  }  div.JiaoXueJiHuaDiv-bottom {    padding: 0 10px;    color: #8c8c8c;    h3 {      padding: 5px 0;      overflow: hidden;      white-space: nowrap;      text-overflow: ellipsis;    }    img {      margin-right: 10px;    }  }}.JiaoXueJiHuaDiv:hover {  div.JiaoXueJiHuaDiv-bottom {    // color: #fb4f6d;  }}.JiaoXueJiHuaR {  border: 1px solid #eee;  box-shadow: 2px 2px 2px #eee;  padding: 20px;  margin-top: 20px;  width: 70%;  img {    width: 100%;    height: 100%;  }}a:hover {  text-decoration: none;}}</pre>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

常用的數組字串方法

怎樣在js的數組中過濾掉false, null, 0, "", undefined, and NaN這些值

table tr th 及table tr td 字型太多超出怎樣用CSS解決

如何判斷瀏覽器的IE 6 7 8 9