VUE如何使用anmate.css

PHP中文网 • 2025年3月10日 23:50:17 • 编程技术 • 阅读 2

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

注意：

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

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

2、直接出代码如下：

立即学习“前端免费学习笔记（深入）”；

              ![](classImg)      
              {{item.teachPlanName}}
                  ![](../../../../static/img/jiangshi.png)          开始时间:                    共{{item.trainingCycle}}个课        
      
    
                            
    
  
//网站原因 无法写 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;}}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
相关阅读：
常用的数组字符串方法
常用的数组字符串方法
常用的数组字符串方法
常用的数组字符串方法
以上就是VUE如何使用anmate.css的详细内容，更多请关注【创想鸟】其它相关文章！




 
 



                                                        版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2899801.html