html - 动画 Angular js 按钮

Question

我正在使用一个 Angular js 按钮，但我似乎无法使用传统的 css 和 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
}

检查这个 fiddle https://jsfiddle.net/2up5y71k/