For Loop ใช้ n-child ไม่ถูกต้อง

เมื่อใช้ Sass ฉันกำลังวนซ้ำรายการต่างๆ ด้วยคลาส animateMe และใช้การหน่วงเวลาของภาพเคลื่อนไหวโดยใช้ดัชนีเป็นตัวคูณ

@for $i from 1 through 100 {
  .animateMe:nth-child(#{$i}) {
    animation-delay: .5s * $i;
  }
}

เมื่อใช้ Angular ฉันใช้คลาส animateMe กับ div เมื่อตรงตามเงื่อนไขกับ ngClass เท่านั้น

<div id="neededfoodnames" *ngFor="let list of lists; let i = index" [ngClass]="{'animateMe':lists[i-1]?.category != list.category && animate == true}">
.....
</div>

สิ่งนี้ควรใช้คลาสเฉพาะในกรณีที่หมวดหมู่ของรายการแตกต่างจากหมวดหมู่ของรายการสุดท้าย และภาพเคลื่อนไหวได้รับการตั้งค่าเป็นจริง ซึ่งก็คือ

animate: boolean = true;

ผลลัพธ์ที่ได้คือ 4 div ที่มีคลาส animateMe อย่างไรก็ตาม ความล่าช้าของภาพเคลื่อนไหวไม่ได้ถูกนำมาใช้อย่างถูกต้อง เนื่องจาก div ตัวแรกและตัวที่สองมีความล่าช้าที่ถูกต้องคือ .5 วินาที และ 1 วินาที ตามลำดับ ในขณะที่ div ที่สามมีความล่าช้าที่ไม่ถูกต้องคือ 3 วินาที

div ตัวที่สามได้รับคลาส animateMe:nth-child(6) แต่ควรเป็น animateMe:nth-child(3)

ฉันจะแก้ไขสิ่งนี้ได้อย่างไร? ฉันได้สร้าง StackBlitz สำหรับปัญหานี้


javascript angular animation css sass
person cfoster5    schedule 01.08.2018    source แหล่งที่มา
comment
ดูเหมือนว่า CSS ทั้งหมดจะใช้งานได้ดี (ในขณะที่ sass loop กำลังสร้างคลาสทั้งหมดของคุณอย่างถูกต้อง ดังนั้น :nth-child จึงทำงานตามที่คาดไว้) คุณหมายถึงว่า #neededfoodnames:nth-child(4) ไม่มีเนื้อหาอย่างไร หรือคุณกำลังพยายามเขียนทับ css ของคุณด้วย ng-animate   -  person stwilz    schedule 01.08.2018
comment
ป.ล. คุณมีหลายอินสแตนซ์ของ #neededfoodnames ในนั้น :)   -  person stwilz    schedule 01.08.2018
comment
@stwilz ฉันได้ลบ #neededfoodnames แล้ว คลาส animateMe ควรนำไปใช้กับ 4 div เท่านั้น ดังนั้นจึงไม่ควรมี animateMe:nth-child(6) แต่คลาสนั้นมีอยู่   -  person cfoster5    schedule 01.08.2018
comment
lists[i-1]?.category ฉันเห็นการพิมพ์ผิดที่นี่ จุดหลังเครื่องหมายคำถามในตัวดำเนินการที่ประกอบไปด้วยคุณ   -  person DragonKnight    schedule 01.08.2018

คำตอบ (1)


arrow_upward
3
arrow_downward

อาร์เรย์ lists ของคุณมีวัตถุที่ไม่ถือว่าเป็นองค์ประกอบ animateMe มีองค์ประกอบเพียงไม่กี่รายการเท่านั้นที่มีคลาส animateMe ดูภาพหน้าจอนี้:

ป้อนคำอธิบายรูปภาพที่นี่

ภาพหน้าจอนี้อธิบายว่าทำไมตัวเลือก nth-child ไม่ทำงานตามที่คาดไว้ ฉันเห็นวิธีแก้ปัญหาสองประการสำหรับคุณ

โซลูชันที่ 1

ทางออกที่ดีที่สุดคือการล้างองค์ประกอบเหล่านี้ ตามหลักการแล้ว คุณควรมีองค์ประกอบเพียง animateMe รายการในส่วนเฉพาะดังกล่าว เช่นนี้

<div class="animateMe">...</div>
<div class="animateMe">...</div>
<div class="animateMe">...</div>
<div class="animateMe">...</div>

คุณควรหาวิธีในการแสดง UI เดียวกัน แต่มีองค์ประกอบ div น้อยกว่า (เช่น ใช้สไตล์เพิ่มเติมหรือเพียงแค่ย้ายองค์ประกอบภายใต้ animateMe div) หากไม่สามารถทำได้ด้วยเหตุผลบางประการ คุณอาจพิจารณาวิธีแก้ปัญหา #2

โซลูชันที่ 2

โซลูชันทางเลือกอื่น (และไม่สะอาดนัก) สำหรับคุณคือการประมวลผลอาร์เรย์นั้นล่วงหน้าและจัดเก็บแอตทริบิวต์ order ที่ลูปสามารถใช้ได้ ตัวอย่างเช่น:

lists = [{}, {order:1}, {}, {}, {order:2}, {}, {order:3}, {}, {}];

จากนั้นคุณสามารถวนซ้ำอาร์เรย์และเพิ่มแอตทริบิวต์ data-order ที่เราสามารถจับคู่กับ CSS:

<div *ngFor="let list of lists; let i = index" [ngClass]="{'animateMe': list.order && animate}" [attr.data-order]="animate ? list.order : null">
    ...
</div>

หากไม่ได้กำหนดคุณสมบัติ order ในวัตถุของคุณ คุณลักษณะ data-order จะไม่ถูกพิมพ์ นี่คือตัวอย่างของผลลัพธ์:

<div>...</div>
<div class="animateMe" data-order="1">...</div>
<div>...</div>
<div>...</div>
<div class="animateMe" data-order="2">...</div>
<div>...</div>
<div class="animateMe" data-order="3">...</div>
<div>...</div>
<div>...</div>

ขั้นตอนสุดท้ายคือการเปลี่ยนโค้ด SaSS ของคุณให้ตรงกับองค์ประกอบเหล่านั้น:

@for $i from 1 through 100 {
    div[data-order="#{$i}"].animateMe {
        animation-delay: .5s * $i;
    }
}
person HugoTeixeira    schedule 01.08.2018
comment
แนวทางปฏิบัติที่ไม่ดีในการกำหนดเป้าหมายองค์ประกอบใน CSS ตามประเภทแท็กองค์ประกอบ คุณสามารถลบ div ออกจาก Sass ด้านบนได้ และจะยังคงทำงานตามที่คาดไว้ - person ESR; 01.08.2018
comment
@EdmundReed คุณช่วยกรุณาโพสต์ลิงค์ไปยังข้อมูลอ้างอิงที่ยืนยันว่านี่เป็นแนวปฏิบัติที่ไม่ดีหรือไม่? เมื่อพิจารณาว่าเบราว์เซอร์มักจะสร้างดัชนีองค์ประกอบตาม nodeName นั้น div ควรทำให้ตัวเลือกมีประสิทธิภาพมากขึ้น และตามคำจำกัดความแล้ว ถือเป็นแนวปฏิบัติที่ดี - person HugoTeixeira; 01.08.2018
comment
บางทีมันอาจจะดีกว่าในระดับจุลภาคสำหรับประสิทธิภาพ แต่สำหรับการบำรุงรักษาและความสามารถในการปรับขนาดมันเป็นแนวปฏิบัติที่ไม่ดี บทความนี้ดูเหมือนว่าจะอธิบายว่าทำไม frontstuff.io/you-need -เพื่อหยุดการกำหนดเป้าหมายแท็กใน CSS ด้วยสิ่งต่างๆ เหล่านี้ ความสามารถในการบำรุงรักษาและความสามารถในการขยายขนาดมักจะได้รับการสนับสนุนมากกว่าประสิทธิภาพที่เพิ่มขึ้นเพียงเล็กน้อย - person ESR; 02.08.2018