这次给大家带来VUE如何使用anmate.css，VUE使用anmate.css的注意事项有哪些，下面就是实战案例，一起来看一下。
注意：
1、在ajax请求到数据后，先给res返回的数据添加属性anmate = false，千万不要this.planData = res.lists
然后再给this.planData 便利循环添加 anmate 属性 否则 数据刷新后 视图层不刷新；
2、直接出代码如下：
</h5>
<pre class="brush:php;toolbar:false">
<template>
<div id="JiaoXueJiHuaIndex"><div class="row"><div class="col-md-12">
<div :class="{'JiaoXueJiHuaDiv':true,'animated':true,'swing':item.anmate}"
v-for="(item,index) in planData"
@mouseover="enter(index,item)" @mouseout="leave(index)"
@click.stop="hrefPlanIfo(item)">
<div class="JiaoXueJiHuaDiv-top">
 </div>
<div class="JiaoXueJiHuaDiv-bottom">
<h3 style="padding: 0;">{{item.teachPlanName}}</h3>
<p>
 <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 == 'manager'" 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: 'JiaoXueJiHuaIndex',data() {return {
classImg: '../../../../static/img/class_03.jpg', planData: [], quanXianFlag: window.sessionStorage.getItem("_quanXian"), //获取当前用户是老师还是学生 classMsgLists: [], show: false }},methods: { loadPlanTable() { const _this = this; this.$Loading.start();//进度条 $.ajax({ async: true, type: "POST", url: '/CRPTP/a/teachplan/teachPlan/teachPlanList', 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: '/plan/JiaoXueJiHuaXx', query: {teachPlanId: item.id}}) }, jumpAddPage(){ this.$router.push({path: '/plan/addTeachingPlan'}) }, 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中文网其它相关文章！
相关阅读：
怎样在js的数组中过滤掉false, null, 0, "", undefined, and NaN这些值
table tr th 及table tr td 字体太多超出怎样用CSS解决
以上是VUE如何使用anmate.css的详细内容。更多信息请关注PHP中文网其他相关文章！
