VUE如何使用anmate.css

2020-11-27 来源：星星旅游

这次给大家带来VUE如何使用anmate.css，VUE使用anmate.css的注意事项有哪些，下面就是实战案例，一起来看一下。

注意：

1、在ajax请求到数据后，先给res返回的数据添加属性anmate = false，千万不要this.planData = res.lists

然后再给this.planData 便利循环添加 anmate 属性否则数据刷新后视图层不刷新；

2、直接出代码如下：

</h5>
<pre>
<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">
 ![](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 == '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;}
}
</pre>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部栏目

VUE如何使用anmate.css