<p>저는 Vue를 사용하여 마우스를 이미지 위로 가져갈 때 위로 이동하고 페이드 인되는 텍스트 상자에 애니메이션을 적용하고 있습니다. 애니메이션은 정확하지만 시작하기 전에 약간의 지연이 있습니다. 이미지에 마우스를 올리면 텍스트 상자가 매끄럽고 즉시 페이드 인되고 위로 이동하기를 원합니다. 커서가 떠나면 텍스트 상자가 적절하게 페이드 아웃되고 아래로 이동합니다. </p> <pre class="brush:php;toolbar:false;">템플릿: ` <div> <div class="attribute-icons" v-for="(item, i) in techBadges" :key="'tech_' + i"> <img @mouseenter="hoverStart(i)" @mouseleave="hoverEnd" class="attribute-icon" width="30px" height="30px" :src="badges[item].imageSrc" :alt=" 배지[항목].alt"/> <전환> <p v-show="hoveredIndex === i">{{ 배지[item].description }}</p> </전환> </div> </div> `, 행동 양식:{ hoverStart(i){ this.hoveredIndex = i; }, hoverEnd(){ this.hoveredIndex = null; } },</pre> <pre class="brush:php;toolbar:false;">.attribute-icons { 여백 상단: 5px; 위치:상대적; 전환 지연: 0초; img { 너비: 28px; 높이: 28px; 오른쪽 여백: 8px; 전환: 0.24초; 전환 지연: 0초; } 피 { 위치: 절대; 상단: 20px; 너비: 19vw; 최대 너비:350px; 최소 너비:175px; 배경: #0088ce; 색상: #ffffff; Z-색인: 1; 테두리 반경: 5px; 패딩: 5px 10px; 상자 그림자: 0 0 18px rgba(2, 2, 2, 0.14); 포인터 이벤트: 없음; 글꼴 두께: 500; 글꼴 크기: 13px; 전환: 0.24초 용이성; 전환 지연: 0초; @media(최대 너비:1100px){ 폭:25vw; } @media(최대 너비:991px){ 너비:36vw; } } .v-입력-from{ 불투명도: 0; 변환: 번역Y(10px); 전환: 불투명도 0.24초 완화, 변환 0.24초 완화; 전환 지연: 0초; }; .v-입력-활성{ 전환 지연: 0초; 전환: 불투명도 0.24초 완화, 변환 0.24초 완화; 변환: 번역Y(4px); }; .v-enter-to{ }; .v-떠나기{ 변환: 번역Y(10px); }; .v-떠나기-활성{ 전환: 불투명도 0.24초 완화, 변환 0.24초 완화; 변환: 번역Y(10px); }; .v-떠나기{ 불투명도:0; };</pre> <p>我尝试给所有元素添加transition-delay: 0s，但没有起작품용。</p>