CSS 전환 추가

크롬에 크롬에 이상한 CSS 효과가 발생했습니다 (Firefox에서는 발생하지 않음).CSS 전환 추가

나는 웹 사이트 요소의 90 % 이상에서 전환을 사용해야하므로 기본적으로 * CSS 선택기를 사용하여 모든 전환을 추가했습니다.

캡슐화 된 요소가있을 때 이상한 지연이 발생합니다. 이는 많은 일이 발생하고 실제로 성가신 일입니다.

전역 요소가 아닌 모든 단일 요소에 전환을 적용하는 것 외에 다른 방법으로 해결할 수 있습니까?

감사합니다.

* { 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
p:hover { 
 
    color: white; 
 
}

<p>Test <span>test2</span></p>

편집

: 나는 이미 당신에 의해 더 나은 요소를 대상 것을 해결할 수 알지만 그렇게하지 않고 방법을 부탁 해요.

출처

2017-12-20 Zenoo

재미 있습니다! 짜증나지만 재미있는! – sjahan

@Zenoo 문제가 없습니다. 또 다른 비슷한 질문이 도움이 될 수 있습니다 -> https://stackoverflow.com/questions/22069877/css-transitions-strange-unwanted-delay-in-webkit-browsers-chrome-and-safari – sol

글쎄,이 질문은 나에게 '*'를 피하고 내 요소를 혼자서 목표로 삼는다. 나는 그것을하기 위해 오랜 시간이 걸릴 것이기 때문에 다른 사람이 여기에 또 다른 대답을 주길 바란다 : x – Zenoo

이 솔루션은 모든 전환 된 요소를 타겟팅하는 것과 같은 방향으로 이동하지만 모든 컨테이너 요소를 대상으로하는 역방향만으로도 원활하게 진행됩니다. 초기 문제는 해결되지 않습니다. 왜 부모 요소가 전환을 갖기 때문에 지연이 생기므로 먼저 부모 전환을 완료 한 다음 자식 전환을 시작합니다 ... 내 시도는 모든 마지막 자식을 선택하려고 시도하는 것입니다. 두 번째 규칙에 모든 컨테이너 요소를 추가해야 할 것, 어쩌면

* { 
 
    transition: all 0.3s; 
 
} 
 

 
*:not(body):not(div) > * { 
 
    transition: none; 
 
} 
 

 
p:hover { 
 
    color: white; 
 
}

<div> 
 

 
    <p>Test <span>test2</span></p> 
 

 
</div>

을하는 데 도움이 : 그들은 이미 그들의 부모를 통해 전환이 있기 때문에 다음

편집 ..., 그들에 전환을 비활성화

출처

2017-12-20 11:10:58

쓸데없는 선택자가 너무 많아서 하나씩 그렇게 할 수도있다 :// – Zenoo

CSS 전환 추가

답변

관련 문제