javascript - แองกูลาร์ 6 การเคลื่อนไหวภาพพื้นหลังแบบค่อยๆ เลือน

ฉันมีปัญหากับแอนิเมชันใน Angular 6 ฉันไม่แน่ใจว่าฉันทำทุกอย่างถูกต้องหรือไม่ แต่ฉันได้เตรียม Stackblitz พร้อมกับโค้ดส่วนหนึ่งของคอมโพเนนต์ของฉันแล้ว

สิ่งที่ฉันต้องการทำให้สำเร็จคือการทำให้แอนิเมชันลื่นไหลเมื่อไอเท็มปรากฏเมื่อเงื่อนไข *ngIf เป็นจริง แต่ตอนนี้มันดูเหมือนว่าสถานะของสององค์ประกอบลูกที่วางในคอมโพเนนต์ crossfade-images ถูกจัดการเหมือนเป็นองค์ประกอบเดียว (ฉันไม่แน่ใจว่าความคิดของฉันถูกต้องหรือไม่) แต่ฉันต้องการทำให้เหมือนกับว่า: เมื่อโหลดครั้งแรก ไอเท็มแรกเลื่อนลงมาจากด้านบน หลังจากผ่านช่วงเวลาหนึ่ง ไอเท็มนี้ควรเลื่อนลงไป และในเวลาเดียวกัน องค์ประกอบลูกอีกตัวของ crossfade-images ควรเลื่อนมาจากด้านบน และมันควรเกิดขึ้นวนลูปไม่สิ้นสุด

พวกคุณช่วยตรวจสอบ stackblitz ของฉันและช่วยฉันหน่อยได้ไหม?

สแต็กบลิทซ์

คำตอบ #1

ปัญหาที่คุณกำลังประสบคือ transform: 'translateY(-100%)' จะกำหนดตำแหน่งขององค์ประกอบก่อนแล้วจึงใช้การเปลี่ยนแปลง ดังนั้นวิธีที่คุณตั้งค่ามันคือ:

กล่องแสดงตำแหน่งที่ภาพถูกวาง โดยสีเหลืองคือภาพแรก และสีแดงคือภาพที่สอง สิ่งที่คุณต้องการทำคือ position:absolute ให้กับภาพของคุณ (โดยที่ตัวคอนเทนเนอร์เป็น position:relative) และเปลี่ยนตำแหน่งจาก bottom: "100%" เป็น top:"100%"

https://angular-gwxfta.stackblitz.io

คำตอบ #2

ฉันได้เอา transformY(-100%) ออกและเพิ่งเพิ่ม position: relative ให้กับคอนเทนเนอร์หลัก และ position: absolute ให้กับ div ลูก และมันทำงานตามที่ฉันต้องการ ขอบคุณมาก ๆ

ลิงก์ไปยังโค้ดที่ทำงานได้บน Stackblitz