Comment VUE utilise anmate.css

Cette fois, je vais vous montrer comment utiliser anmate.css avec VUE, et quelles sont les précautions à prendre pour utiliser anmate.css avec VUE. Ce qui suit est un cas pratique, jetons un coup d'œil.

Remarque :

1. Après qu'Ajax ait demandé les données, ajoutez d'abord l'attribut anmate = false aux données renvoyées par res Never this.planData = res.lists

Ajoutez ensuite l'attribut anmate à this.planData pour faciliter la boucle, sinon la couche de vue ne sera pas actualisée après l'actualisation des données

2. Sortez directement le code comme suit :

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

Je pense que vous avez lu le cas dans cet article. Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

Lecture connexe :

Méthodes de chaîne de tableau couramment utilisées

Comment filtrer les faux et les nuls dans un tableau js, 0 , "", non défini et NaN.​​

table tr th et table tr td ont trop de polices. Comment le résoudre avec CSS

Comment déterminer le navigateur IE 6 7 8 9

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!