亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將 jQuery 切換動畫轉換為 Angular

將 jQuery 切換動畫轉換為 Angular

忽然笑 2022-10-21 14:42:14
我有以下基于 jQuery 的動畫來切換側邊欄:$('.sa-fixedNav_toggle').click(function () {        $('.sa-fixedNav_positon').toggleClass('sa-fixedNav_size-grow')        $('.pa-content_layout').toggleClass('pa-content_push-right')        $('.sa-fixedNav_expand-button').toggleClass('sa-fixedNav_expand-nav')                if($('.sa-fixedNav_positon').width() == 78) {            sideNavContentShow()        }        else {            setTimeout(() => {                sideNavContentHide()            },150);        }    })  function sideNavContentShow () {      $('.sa-fixedNav_content-expand').removeClass('hidden');      $('.sa-fixedNav_option-expand-icon').removeClass('hidden');       $('.sa-fixedNav_option-expandDown-icon').removeClass('hidden')  }    function sideNavContentHide () {        $('.sa-fixedNav_content-expand').addClass('hidden');        $('.sa-fixedNav_option-expand-icon').addClass('hidden');        $('.sa-fixedNav_option-expandDown-icon').addClass('hidden')  }        $('.sa-fixedNav_nav-links').click(function () {        $('.sa-fixedNav_option-expandDown-icon').toggleClass('sa-fixedNav_expand-hidden')        $('.sa-fixedNav_option-expand-icon').toggleClass('sa-fixedNav_expand-hidden')    })現在我正在嘗試將其轉換為 Angular。我試過使用Renderer2and @ViewChild。但是在那里沒有選項toggleClass也沒有方法來獲得寬度。如何在 Angular 中做到這一點?
查看完整描述

1 回答

?
天涯盡頭無女友

TA貢獻1831條經驗 獲得超9個贊

您可以像下面一樣使用@ViewChild()andElementRef和classList


<div #someelementone class="some-element-class toggle-class-one">

  Test

</div>

<div #someelementtwo class="some-element-class toggle-class-two">

  Tes2

</div>

<div #someelementthree class="some-element-class toggle-class-three">

  Tes3

</div>


<button (click)="updateElementClasses()">Toggle Classes</button>

在 ts 文件中


export class AppComponent {

  @ViewChild('someelementone') someElementOne: ElementRef;

  @ViewChild('someelementtwo') someElementTwo: ElementRef;

  @ViewChild('someelementthree') someElementThree: ElementRef;


  updateElementClasses() {

    this.toggleClass(this.someElementOne, 'toggle-class-one');

    this.toggleClass(this.someElementTwo, 'toggle-class-two');

    this.toggleClass(this.someElementThree, 'toggle-class-three');

  }


  toggleClass(eleRef: ElementRef, classStr: string) {

    eleRef.nativeElement.classList.toggle(classStr);

  }

}

你可以從這里找到正在工作的 Stackblitz


對于classListAPI,有兩種方法add()和remove(). 您可以在其中添加和刪除特定元素的類


查看完整回答
反對 回復 2022-10-21
  • 1 回答
  • 0 關注
  • 73 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號