transition class work only in first time angular js

Question

I try when click in button , will toggle class transition of Here is my code

function linkFc(scope,element,attr) {
            var toggle =angular.element(document.querySelector('.fa-bars'));
            toggle.on('click',function(){
                element.toggleClass('toggle');
            })
            }

Here is my plnkr

https://plnkr.co/edit/1403TdWErBAzrdbszkGo?p=preview Where is my wrong ? Please help me

Dear jesus, why don't you use <button class="fa-bars" ng-class="{toggle: btn.clicked}" ng-click="btn.clicked = !btn.clicked">Hi</button> — Alon Eitan
– Alon Eitan, Commented Apr 25, 2017 at 13:08
That would be a simpler way to toggle the class, but the question refers to the transition not working - I'm assuming you want to transition the menu back to full width when you click the hamburger button - is that correct? — tw_hoff
– tw_hoff, Commented Apr 25, 2017 at 13:11

tw_hoff · Accepted Answer · 2017-04-25 13:16:59Z

1

Assuming you want the width of the nav menu to transition back to 300px when you click the hamburger, you need to mover you transition rule to the base sate CSS block, you currently have it in the .toggle .nav-side-menu block, which is only applied when the parent element has the .toggle class.

Move the transition: all 1s ease; rule to the .nav-side-menu block to achieve the desired effect.

On another note, please read some articles about code quality and formatting. Your code is very messy, which will make it harder for others (and yourself) to read and maintain in the future.

answered Apr 25, 2017 at 13:16

tw_hoff

4003 silver badges8 bronze badges

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

2 Comments

Nguyễn Bảo Dũng Over a year ago

Thank you very much . I just newbie in angular . Can you introduce for me some articles ?

tw_hoff Over a year ago

Google is your friend. I can point you in the right direction for learning good practises about CSS. First, I would recommend reading about CSS specificity and selector types - inline styles, IDs and classes. Next I would recommend reading something like SMACSS (scalable and modular architecture for CSS). It might seem confusing at first, but even just knowing about this (without understanding it immediately) will save you many headaches moving forward. Good luck!

Collectives™ on Stack Overflow

transition class work only in first time angular js

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related