当前位置:八天网 > 内容 > 正文

transform scale 无效

2020-07-05 15

可以addClass()方法来此动作:

比如想旋转一icon:

在css中加入一个class

[css] view plain copy

  • .add_transform{  

  • transform:rotate(180deg);  

  • -ms-transform:rotate(180deg);    /* IE 9 */  

  • -moz-transform:rotate(180deg);   /* Firefox */  

  • -webkit-transform:rotate(180deg); /* Safari 和 Chrome */  

  • -o-transform:rotate(180deg);    /* Opera */  

  • transition: all 0.5s ease-in-out;  

  • -moz-transition: all 0.5s ease-in-out; /* Firefox 4 */  

  • -webkit-transition: all 0.5s ease-in-out; /* Safari 和 Chrome */  

  • -o-transition: all 0.5s ease-in-out; /* Opera */  

  • }  


    然后通过$("选择器").toggleClass(".add_transform");来使icon的旋转变为动画效果

    或者下载补丁(加一个js文件):

    https://github.com/zachstronaut/jquery-animate-css-rotate-scale/

    .addw{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
    .add{
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5) }
    然后用jquery.addclass("addw").addclass("add");这样就了!上stack overflow上收多半是这种办发
本周热门
热门文章
热门关注