How VUE uses anmate.css

This time I will show you how to use anmate.css with VUE, and what are the precautions for using anmate.css with VUE. The following is a practical case, let’s take a look.

Note:

1. After ajax requests the data, first add the attribute anmate = false to the data returned by res, never this.planData = res.lists

Then add the anmate attribute to this.planData to facilitate the loop, otherwise the view layer will not be refreshed after the data is refreshed;

2. Directly output the code as follows:

</h5>
<pre class="brush:php;toolbar:false">
<template>
<div id="JiaoXueJiHuaIndex"><div class="row"><div class="col-md-12">
<div :class="{&#39;JiaoXueJiHuaDiv&#39;:true,&#39;animated&#39;:true,&#39;swing&#39;: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 == &#39;manager&#39;" 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标签
//script
export default {name: &#39;JiaoXueJiHuaIndex&#39;,data() {return {
   classImg: &#39;../../../../static/img/class_03.jpg&#39;,    planData: [],    quanXianFlag: window.sessionStorage.getItem("_quanXian"), //获取当前用户是老师还是学生    classMsgLists: [],    show: false  }},methods: {  loadPlanTable() {    const _this = this;    this.$Loading.start();//进度条    $.ajax({      async: true,      type: "POST",      url: &#39;/CRPTP/a/teachplan/teachPlan/teachPlanList&#39;,      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: &#39;/plan/JiaoXueJiHuaXx&#39;, query: {teachPlanId: item.id}})  },  jumpAddPage(){    this.$router.push({path: &#39;/plan/addTeachingPlan&#39;})  },  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;}
}

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Commonly used array string methods

How to filter out false, null in js array , 0, "", undefined, and NaN. These values

##table tr th and table tr td have too many fonts. How to solve it with CSS

How to determine the browser IE 6 7 8 9

The above is the detailed content of How VUE uses anmate.css. For more information, please follow other related articles on the PHP Chinese website!