여러 CSS 전환 효과를 구현하는 방법

이것은 매우 간단한 질문이지만 CSS 전환 속성에 대한 좋은 문서를 찾을 수 없습니다. 다음은 CSS 스니펫입니다. .nava{text-transform:uppercase;text-꾸밈:none;color:#d3d3d3;line-height:1.5em;font-size:.8em;display:block;text-align:center; 텍스트 -shadow:0-1.5em0rgba(2

P粉258788831 2023-08-22 11:00:36 0  2  444

CSS를 사용하여 높이:0;높이:자동;을 어떻게 전환할 수 있나요?

CSS 전환을 사용하여 슬라이드를 아래로 만들려고 합니다. 높이:0;에서 시작합니다. 마우스를 올리면 높이가 height:auto;로 설정됩니다. 그러나 이로 인해 height:40px; 에서 height:auto; 로 이동한 다음 height:0; 으로 이동한 다음 갑자기 올바른 높이로 이동합니다. JavaScript를 사용하지 않고 어떻게 이 작업을 수행할 수 있습니까? #child0{높이:0;오버플로:숨김;배경

P粉461599845 2023-08-27 11:59:03 0  2  459

javascript - vue 2.0 전환 전환 효과가 비정상입니다.

vue2.0에서 스위칭 전환을 했을 때 스위칭 표시가 정상적으로 되는 것을 확인했는데, 전환이 사라지면서 딜레이가 발생하고 전환 효과가 없었습니다. {code...} {code...}

世界只因有你 2017-05-19 10:33:34 0  1  577

css3 - CSS 전환 효과로 인해 텍스트가 흐려지거나 떨리나요?

gif로 직접 이동해 보겠습니다. 코드: 템플릿: {code...} CSS: {code...} 일부 관련 없는 스타일이 제거되었습니다. 현재 알려진 상황은 오른쪽에 있는 작은 삼각형의 전환 효과입니다. Chrome의 드롭다운 상자에 backface-visibility: hide;를 추가하면 텍스트가 흐려지고 흔들립니다.

ringa_lee 2017-05-24 11:35:53 0  2  2408

javascript - vue 전환 효과 클래스 이름의 CSS 전환 순서

요소에 대한 전환을 디자인하면 높이가 나타날 때 증가하고 사라질 때 감소하는 것이 이상적인 효과입니다. 설계된 코드는 다음과 같습니다. {Code...} 결과 요소가 나타날 때 높이가 100px에 직접 도달하고 사라지면 코드를 수정하는 순서는 다음과 같습니다. 문제는 해결됐는데 왜 주문을 하는지 모르겠네요...

黄舟 2017-06-26 10:55:15 0  4  622

접지 필터 흐림 전환 문제

버튼을 누르면 배경이 흐려지는데 전환 시 div 가장자리가 잘 전환되지 않습니다. 이 문제는 Firefox를 제외한 모든 브라우저에 존재합니다. 어떻게 해결할 수 있나요? varbtn=document.querySelector('버튼');vardiv=document.querySelector('div');btn.addEventListener('click',function(){div.classList.toggle('

P粉314915922 2024-04-01 23:10:22 0  1  413

javascript - vue1.0 전환 효과를 vue2.0으로 변경하는 방법은 무엇입니까?

이게 1.0의 전환효과를 2.0으로 변환한건데 뭐지!

为情所困 2017-05-19 10:40:59 0  2  556

내면아이의 과도기적 불길

이것은 최소한의 재현 가능한 예입니다. "토글" 호버의 전환 끝은 실행되고(원하지 않음) "a"를 조기에 숨깁니다. 변환 후 다시 나타나려면 전환을 클릭하세요. 스위치가 내부에 있기 때문에 이런 일이 발생한다는 것을 알고 있습니다(변경할 수 없음). 전환 시 전환을 중지하는 방법이 있습니까(어떤 전환이 발생했는지 감지하지 않고). 너무 복잡해지고 Transitionend에 버그가 있는 것으로 밝혀졌습니다. 저는 오히려 setTimeout을 사용하고 싶습니다(CSS 전환에는 약간 우스꽝스럽습니다)....

P粉274161593 2024-04-02 14:38:29 0  1  342

javascript - 요소가 전환 상태에 있는지 확인하는 방법은 무엇입니까?

그런 재산이 있나요? 요소가 전환 상태에 있는지 알 수 있나요? 이제 Transitionend 이벤트의 전환이 완료된 각 요소에 속성을 추가하여 표시합니다.

typecho 2017-07-05 10:36:10 0  1  772

JavaScript는 썸네일에서 전체 너비 이미지 페이지로의 원활한 전환을 구현합니다.

http://manifesto.clapat.com/ 홈 페이지의 항목을 클릭하면 해당 항목 페이지의 제목이 될 썸네일에서 전체 화면 이미지로 전환됩니다. 이러한 전환 효과는 어떻게 생성되며 ReactRouter 대신 내부 라우팅을 사용하여 이를 구현하는 가장 좋은 방법은 무엇입니까? 누군가가 ReactRouter에서 작동하도록 할 수 있다면 저도 그것을 포팅할 수 있습니다. 사용 가능한 몇 가지 튜토리얼이 있지만 모두 다른/프로젝트 페이지로 이동하는 대신 전체 화면 모달 구성 요소와 유사하게 동일한 페이지에 데이터를 로드합니다.

P粉536532781 2023-09-15 22:09:37 0  1  935

CSS3 전환으로 그라데이션 배경 강화

CSS를 사용하여 축소판 이미지에 전환을 적용하여 마우스를 올리면 배경이 페이드인되도록 하려고 합니다. 변환이 작동하지 않지만 rgba() 값으로 변경하면 훌륭하게 작동합니다. 그래디언트를 지원하지 않나요? 또한 이미지를 사용해 보았는데 이미지도 변환되지 않습니다. 다른 게시물에서 누군가가 그렇게 했기 때문에 이것이 가능하다는 것을 알고 있지만 정확히 어떻게 하는지는 모르겠습니다. 어떤 도움이라도 > 사용할 수 있는 CSS는 다음과 같습니다: #containerdiva{-webkit-transition:backgrou

P粉955063662 2023-10-12 18:05:11 0  2  605

그라데이션 배경과 함께 CSS3 전환 사용

CSS를 사용하여 축소판 이미지에 전환을 적용하여 마우스를 올리면 배경이 페이드인되도록 하려고 합니다. 변환이 작동하지 않지만 rgba() 값으로 변경하면 제대로 작동합니다. 그라디언트를 지원하지 않나요? 또한 이미지를 사용해 보았는데 이미지도 변환되지 않습니다. 다른 게시물에서 누군가가 그랬기 때문에 이것이 가능하다는 것을 알고 있지만 정확히 어떻게 하는지는 모르겠습니다. 어떤 도움이라도 > 사용할 수 있는 CSS는 다음과 같습니다: #containerdiva{-webkit-transition:Background0.

P粉217629009 2023-08-23 21:25:42 0  2  630

순수 Javascript를 사용하여 이미지 교체를 위한 전환 효과 구현

내가 만든 웹사이트에는 여러 개의 아코디언이 있는데 각 아코디언의 상단에는 이미지가 있습니다. 아코디언을 펼치면 안에 설명이 들어가고 이미지가 다른 것으로 변경됩니다. 그런 다음 아코디언을 닫으면 이미지가 첫 번째 이미지로 다시 전환됩니다. 문제는 이 이미지 변경이 페이드 효과를 사용하여 부드럽게 전환되기를 원하는데 지금은 갑작스러운 변경일 뿐이라는 것입니다. 어떻게 해야 합니까? 아코디언 버튼의 ID가 "button"이고 첫 번째 이미지(두 번째 이미지로 변경됨)가 포함된 레이블의 ID가 "firstim...

P粉458913655 2024-03-30 00:14:11 0  1  394

창 크기를 조정할 때 부드러운 전환 여백 비율을 달성하는 방법

뷰포트가 더 작을 때 뷰포트 너비의 5%, 뷰포트가 더 클 때 뷰포트 너비의 15%인 요소 주위에 백분율 여백을 설정하고 싶습니다. 미디어 쿼리를 사용하여 다음과 같이 여백의 숫자 값을 전환할 수 있습니다. .element{margin:5%;}@media(min-width:800px){.element{margin:15%;}} 그러나 저는 창 크기가 변경되면 백분율이 한 값에서 다른 값으로 갑자기 전환되지 않고 부드럽게 전환됩니다. 내 생각에는 다음과 같은 것이 효과가 있을 것 같습니다: @m

P粉155832941 2023-09-12 18:47:54 0  1  574

한 가지 색상으로 그려진 텍스트에서 애니메이션 그라데이션으로 부드럽게 전환하는 것이 가능합니까?

페이지에 흰색 텍스트가 있고 그 아래에 버튼이 있습니다. 또한 애니메이션 그라데이션이 적용되어 텍스트를 채웁니다. 버튼을 클릭하면 -webkit-text-fill-color 속성이 투명해지며 텍스트 색상이 그라데이션에 맞게 갑자기 변경됩니다. 이렇습니다: https://codepen.io/hvyjhqnt-the-vuer/pen/poQdaLQ 흰색에서 그라데이션으로 부드럽게 전환하는 것이 가능합니까? (-webkit-text-fill-color 속성은 transiti를 직접 지원하지 않습니다.

P粉762447363 2023-09-16 09:22:05 0  1  788

Vue 전환에서 전환 지연을 제거하는 방법은 무엇입니까?

저는 Vue를 사용하여 마우스를 그림 위로 가져갈 때 위로 이동하고 페이드 인하도록 텍스트 상자에 애니메이션을 적용하고 있습니다. 애니메이션은 정확하지만 시작하기 전에 약간의 지연이 있습니다. 이미지에 마우스를 올리면 텍스트 상자가 매끄럽고 즉시 페이드 인되고 위로 이동하기를 원합니다. 커서가 떠나면 텍스트 상자가 적절하게 페이드 아웃되고 아래로 이동합니다. 템플릿:`{{배지[item].description}}`, 메서드:{hoverStart(i){this.hoveredIndex=i;},

P粉757432491 2023-08-17 17:36:49 0  1  475

CSS 전환: 배경 크기가 작동하지 않습니다.

저는 이미지 위로 마우스를 가져가면 축소되어 div의 배경을 보기 위해 너무 많이 축소하지 않고도 전체 이미지를 볼 수 있는 웹 사이트를 작업하고 있습니다. 내 HTML은 다음과 같습니다. <divid="wrapper"><divid="imgDiv"><divid="transitionDiv"style="Background-image:u

P粉821808309 2023-09-05 00:05:08 0  1  544