这次给大家带来vue如何使用anmate.css，vue使用anmate.css的注意事项有哪些，下面就是实战案例，一起来看一下。
注意：
1、在ajax请求到数据后，先给res返回的数据添加属性anmate = false，千万不要this.planData = res.lists
然后再给this.planData 便利循环添加 anmate 属性 否则 数据刷新后 视图层不刷新；
2、直接出代码如下：
立即学习“前端免费学习笔记（深入）”；
//网站原因 无法写 srcipt 和 style标签//scriptexport 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;}}{{item.teachPlanName}}
 开始时间: 共{{item.trainingCycle}}个课
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
相关阅读：
常用的数组字符串方法
怎样在js的数组中过滤掉false, null, 0, "", undefined, and NaN这些值
table tr th 及table tr td 字体太多超出怎样用CSS解决
如何判断浏览器的IE 6 7 8 9
以上就是VUE如何使用anmate.css的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609070.html
微信扫一扫 
支付宝扫一扫 
