How VUE uses anmate.css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How VUE uses anmate.css

Mar 09, 2018 pm 04:57 PM

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:

&lt;/h5&gt;
&lt;pre&gt;
&lt;template&gt;
&lt;div id=&quot;JiaoXueJiHuaIndex&quot;&gt;&lt;div class=&quot;row&quot;&gt;&lt;div class=&quot;col-md-12&quot;&gt;
&lt;div :class=&quot;{&#39;JiaoXueJiHuaDiv&#39;:true,&#39;animated&#39;:true,&#39;swing&#39;:item.anmate}&quot;
         v-for=&quot;(item,index) in planData&quot;
         @mouseover=&quot;enter(index,item)&quot; @mouseout=&quot;leave(index)&quot;
         @click.stop=&quot;hrefPlanIfo(item)&quot;&gt;
      &lt;div class=&quot;JiaoXueJiHuaDiv-top&quot;&gt;
        ![](classImg)      &lt;/div&gt;
      &lt;div class=&quot;JiaoXueJiHuaDiv-bottom&quot;&gt;
        &lt;h3 style=&quot;padding: 0;&quot;&gt;{{item.teachPlanName}}&lt;/h3&gt;
        &lt;p&gt;
          ![](../../../../static/img/jiangshi.png)          &lt;span&gt;开始时间:&lt;/span&gt;
          &lt;span v-text=&quot;item.beginTime.substr(0,16)&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;pull-right&quot;&gt;共{{item.trainingCycle}}个课&lt;/span&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--添加--&gt;
    &lt;div style=&quot;border:none;&quot;
         v-if=&quot;quanXianFlag == &#39;manager&#39;&quot; id=&quot;addWrap&quot; class=&quot; JiaoXueJiHuaDiv&quot; @click.stop=&quot;jumpAddPage&quot;&gt;
      &lt;div class=&quot;JiaoXueJiHuaDiv-top  &quot;
           style=&quot;height:230px;text-shadow: 3px 3px 3px #999;line-height: 230px;font-size: 60px;text-align: center;&quot;&gt;
        &lt;Icon  class=&quot;rotation&quot;  type=&quot;plus-round&quot;
              style=&quot;font-size:90px;color:#78cddc;&quot;&gt;&lt;/Icon&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;//网站原因 无法写 srcipt 和 style标签
//script
export default {name: &#39;JiaoXueJiHuaIndex&#39;,data() {return {
   classImg: &#39;../../../../static/img/class_03.jpg&#39;,    planData: [],    quanXianFlag: window.sessionStorage.getItem(&quot;_quanXian&quot;), //获取当前用户是老师还是学生    classMsgLists: [],    show: false  }},methods: {  loadPlanTable() {    const _this = this;    this.$Loading.start();//进度条    $.ajax({      async: true,      type: &quot;POST&quot;,      url: &#39;/CRPTP/a/teachplan/teachPlan/teachPlanList&#39;,      dataType: &quot;JSON&quot;,      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;}
}
&lt;/pre&gt;

Copy after login

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!