집 >웹 프론트엔드 >CSS 튜토리얼 >VUE가 anmate.css를 사용하는 방법

VUE가 anmate.css를 사용하는 방법

php中世界最好的语言원래의: 2018-03-09 16:57:302866검색

이번에는 VUE에서 anmate.css를 사용하는 방법과 VUE에서 anmate.css를 사용할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

참고:

1 ajax가 데이터를 요청한 후 먼저 res에서 반환된 데이터에 anmate = false 속성을 추가하세요. 절대 this.planData = res.lists

그런 다음 편의 루프를 위해 anmate 속성을 this.planData에 추가하세요. 그렇지 않으면 데이터가 새로 고쳐진 후 뷰 레이어가 새로 고쳐지지 않습니다.

2. 다음과 같이 코드를 직접 출력합니다.

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!