Question

我正在使用角度js按钮，但我似乎无法使用传统的css＆amp; js方法将动画放在上面......我试图在按钮上实现不透明度动画。有人可以帮忙吗？

HTML

<span id="sign_btn">
   <md-button>Button</md-button>
</span>

CSS：

#sign_btn{
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
display:none;
opacity:0;
}

JS：

$("#sign_btn").css('display', 'block');
$("#sign_btn").css('opacity', '1');

Answer 1

您应该使用动画而不是过渡。

首先，创建一个自定义动画

    @-webkit-keyframes opanimation {
          0% {
            opacity:0;
          }
          100% {
            opacity:1;
          }
    }
    @-moz-keyframes opanimation {
          0% {
            opacity:0;
          }
          100% {
            opacity:1;
          }
    }
    @-o-keyframes opanimation {
          0% {
            opacity:0;
          }
          100% {
            opacity:1;
          }
    }
    @keyframes opanimation {
          0% {
            opacity:0;
          }
          100% {
            opacity:1;
          }
    }

然后将其应用于元素

#sign_btn {
   animation: opanimation 5s; //you can modify the seconds here
}

检查这个小提琴https://jsfiddle.net/2up5y71k/

Answer 2

转换仅适用于从一个可见状态到另一个可见状态的更改。您的按钮最初为display:none;，因此不透明度更改不会被视为不透明度从一种状态到另一种状态的变化。删除它（使用其他技术，如定位，z-index，translate等来达到类似的效果），过渡应该有效。

Answer 3

找到解决方案..

$("#sign_btn").delay(0).animate({"opacity": "1"}, 200);

动画一个Angular js按钮

3 个答案: