Wie VUE anmate.css verwendet

Dieses Mal zeige ich Ihnen, wie Sie anmate.css mit VUE verwenden und welche Vorsichtsmaßnahmen für die Verwendung von anmate.css mit VUE gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Hinweis:

1. Nachdem Ajax die Daten angefordert hat, fügen Sie zunächst das Attribut anmate = false zu den von res zurückgegebenen Daten hinzu Fügen Sie dann das Anmate-Attribut zu this.planData hinzu, um die Schleife zu erleichtern. Andernfalls wird die Ansichtsebene nach der Aktualisierung der Daten nicht aktualisiert.

2. Geben Sie den Code direkt wie folgt aus:

Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Nachdem Sie die Methode gemeistert haben, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!

</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;}
}

Verwandte Lektüre:

Häufig verwendete Array-String-Methoden

So filtern Sie false, null im js-Array heraus, 0 , "", undefiniert und NaN. Diese Werte

table tr th und table tr td haben zu viele Schriftarten mit CSS

So ermitteln Sie den Browser IE 6 7 8 9

Das obige ist der detaillierte Inhalt vonWie VUE anmate.css verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!