Animating an Angular js button

Question

I'm using an angular js button, but i cant seem to use conventional css&js methods to put animations on it..i'm trying to implement an opacity animation on the button. can anyone please help?

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');

Can you share the code that you are trying to get to work. Putting it in something like a jsfiddle will also help — Andrew
– Andrew, Commented Jul 13, 2016 at 9:01
How do you try to apply the opacity exactly? Please post your code — Roysh
– Roysh, Commented Jul 13, 2016 at 9:03
you use transition, therefore, it should be trigger, like on hover event for instance. — Roysh
– Roysh, Commented Jul 13, 2016 at 9:06

Roysh · Accepted Answer · 2016-07-13 09:17:35Z

1

You should use animation instead of transition.

First, create a custom animation

    @-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;
          }
    }

Then apply it to you element

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

Check this fiddle https://jsfiddle.net/2up5y71k/

edited Jul 13, 2016 at 9:17

answered Jul 13, 2016 at 9:11

Roysh

1,5503 gold badges17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Shanzid Shaiham Over a year ago

how can i trigger the animation with js?

Roysh Over a year ago

This will be triggered automatically (check fiddle). on this animation, the element will animate from 0 to 1 opacity. You can modify it according to what you want.

Roysh Over a year ago

You should also remove the JS code you've posted in order for this to work.

Shanzid Shaiham Over a year ago

i need to trigger the animation on an event, so i need the js code

Roysh Over a year ago

On what event you want to trigger it?

|

T J · Accepted Answer · 2016-07-13 09:18:15Z

0

Transitions only work for changes from one visible state to another. Your button is initially display:none; so the opacity change is not considered as a change in opacity from one state to another. Remove it (use other techniques like positioning, z-index, translate etc to achieve similar effect) and the transition should work.

answered Jul 13, 2016 at 9:18

T J

43.2k13 gold badges87 silver badges142 bronze badges

1 Comment

T J Over a year ago

@ShanzidS.Bidhan then it should be some other issue with your code. Please share a minimal reproducible example

Shanzid Shaiham · Accepted Answer · 2016-07-14 07:57:22Z

0

found out the solution..

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

answered Jul 14, 2016 at 7:57

Shanzid Shaiham

691 gold badge3 silver badges15 bronze badges

Collectives™ on Stack Overflow

Animating an Angular js button

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related