Анимация угловой кнопки js

Question

Я использую угловую кнопку 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

узнал решение ..

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

Answer 2

Вы должны использовать анимацию вместо перехода.

Во-первых, создать пользовательскую анимацию

@-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 3

Переходы работают только изменения от одного видимого состояния в другое. Ваша кнопка изначально display:none;, поэтому изменение непрозрачности не рассматривается как изменение непрозрачности из одного состояния в другое. Удалите его (используйте другие методы, такие как позиционирование, z-index, translate и т. Д. Для достижения аналогичного эффекта), и переход должен работать.