선택 이벤트가 변경되면 CSS 애니메이션이 해당 효과를 트리거합니다.

저는 React 앱을 만들려고 합니다. 지금은 포켓몬이 포함된 선택 입력 상자가 있습니다. 선택 항목이 변경될 때마다(예: 포켓몬이 변경될 때) 포켓몬 스프라이트가 약간 흔들리는 애니메이션을 수행해야 합니다. 현재는 변경되는 스프라이트와 선택 값이 변경될 때 재생되는 오디오만 있습니다. 이 기능을 어떻게 구현할 수 있나요? onChange 및 스타일 구성 요소를 사용하여 스타일을 변경해 보았지만 작동하지 못했습니다. 애니메이션은 페이지가 로드될 때만 실행됩니다. 이것은 내 현재 코드입니다: Select.ts:i

P粉200138510 2024-04-01 09:16:28 0  1  506

javascript - js(Vue) practice : @를 입력하면 관련 후보 목록이 자동으로 나오는 방법은?

효과는 다음과 같습니다. 효과 설명: 1. 사용자가 @ 기호를 입력하면 옵션 목록이 나타나고 옵션 목록이 @ 기호 뒤에 자동으로 배치됩니다. (현재 아이디어는 @인 경우 입력 문자를 동적으로 모니터링하고 커서가 가리키는 위치에 목록 상자가 나타납니다.) 2. 사용자가 @를 입력하면 사용자가 선택을 무시하고 계속 입력합니다. .

PHP中文网 2017-07-05 11:03:32 0  3  3632

후속 클래스가 요소에 추가될 때마다 CSS 애니메이션을 실행하는 방법

요소에 애니메이션을 적용할 수 있도록 CSS 애니메이션 클래스를 설정했습니다. 입력 버튼을 클릭하면 이 클래스가 추가되고 예제의 입력 버튼을 클릭할 때마다 화면으로 날아가도록 하고 싶습니다. 그러나 처음에만 작동하며 후속 입력 클릭에서는 요소에 애니메이션이 적용되지 않습니다. 내가 여기서 무엇을 놓치고 있는 걸까요? $(document).ready(function(){jQuery('#cloc').click(function(){jQuery('p').removeClass('anim

P粉714780768 2023-09-09 22:36:42 0  1  545

팝업 키보드를 수용하기 위해 iOS Safari에서 페이지를 위로 이동하는 방법

iPhone의 Safari에 키보드가 표시될 때 페이지를 위로 어떻게 이동합니까? 현재 누군가가 키보드에 초점을 맞추면 키보드가 입력 상자를 덮습니다. 키보드를 입력 상자 아래에 두고 싶습니다. 누구든지 도와주실 수 있나요? 입력 상자가 초점을 잃을 때 이 효과를 취소하는 방법은 무엇입니까?

P粉715228019 2023-08-09 17:01:31 0  1  678

javascript - 반응으로 애니메이션 효과를 작성하는 방법은 무엇입니까?

반응 중인 구성 요소에 대한 애니메이션 효과를 만드는 방법은 무엇입니까? 예를 들어 간단한 대화 상자의 경우 취소를 클릭하면 대화 상자가 먼저 희미해졌다가 사라지기를 바랍니다. jquery를 사용하는 경우 매우 간단합니다. 먼저 애니메이션({ //Fade CSS}, function(){ //Delete DOM})을 적용합니다. 그런데 반응이 어떨지 모르겠어요...

世界只因有你 2017-05-18 10:58:34 0  2  735

html - 양식 사용자 이름 프롬프트와 오류 프롬프트가 별도로 표시됩니까?

입력 상자를 클릭하면 사용자 이름 프롬프트가 표시됩니다. 지금 등록 버튼을 클릭하면 입력 상자 아래에 오류 프롬프트 {code...}가 표시됩니다. 이제 내용을 입력하는데 오류를 원하지 않습니다. 현재 문제는 해당 내용을 입력하는 것입니다. 결과는 다음과 같습니다. 입력 내용이 올바르지 않습니다.

PHP中文网 2017-05-15 17:03:55 0  1  680

javascript - 이상한 문제를 발견했습니다. 탭을 닫으면 제가 작성한 CSS 애니메이션이 자동으로 일시중지됩니다.

이상한 문제를 발견했습니다. 제가 작성한 CSS 애니메이션이 탭을 닫으면 자동으로 일시정지되고, 탭을 펼치면 계속 재생됩니다. 움직이는 효과를 얻기 위해 배경 이미지를 사용하는 것도 이와 관련이 있나요?

给我你的怀抱 2017-06-30 09:52:30 0  1  842

javascript - btcc.com 홈페이지의 애니메이션 배경을 구현하는 방법은 무엇입니까?

사이트가 로드되면 배경에 약간의 애니메이션 효과가 나타나는데, 이는 딱 맞습니다. https://www.btcc.com/

大家讲道理 2017-05-16 13:26:40 0  1  566

javascript - 프런트엔드 지도 애니메이션 효과를 구현하는 방법입니다.

아래 효과와 유사하게 아바타가 경로에 따라 움직일 수 있습니다. 저는 이런 애니메이션을 본 적이 없습니다. 프런트 엔드는 어떻게 구현되어야 합니까? 캔버스? webGL? 아니면 기성 프레임워크? 이 효과를 얻으려면 어떤 아이디어를 사용해야 하는지 전혀 모르겠습니다. . .

PHPz 2017-05-16 13:36:02 0  2  456

모바일의 버튼이 계속 초점을 맞추거나 활성 상태를 유지하여 CSS 애니메이션에 문제를 일으킴

버튼을 클릭할 때마다 애니메이션을 구현하려고 하는데 데스크톱에서는 잘 작동하지만 모바일에서는 동일한 효과를 얻을 수 없습니다. 먼저 버튼을 클릭한 다음 다른 곳을 클릭하여 CSS의 초점을 맞춘 다음 버튼을 다시 클릭하여 애니메이션 효과를 얻어야 합니다. 아래는 코드 조각입니다. .btn_container{color:#35f8ff;position:relative;display:inline-block;text-align:center;margin:2.5remauto

P粉043295337 2023-08-28 15:14:37 0  1  513

javascript - 프론트엔드 자기 계발

앞서 언급한 바와 같이 저는 이제 막 업계에 들어와 회사에 입사한 지 두 달이 되었습니다. 저는 제 자신을 '진짜 다이아몬드'라고 생각합니다. 그러나 회사는 제가 하는 한 프론트엔드 효과에 별로 관심을 두지 않습니다. div를 작성할 수 있으며, 페이지의 기본 스타일만 있으면 js를 작성할 필요가 없습니다. 나는 프론트엔드 프레임워크에 많이 노출되지 않았습니다. ...

曾经蜡笔没有小新 2017-07-03 11:43:03 0  2  961

CSS의 입력 애니메이션이 지정된 제한을 초과합니다.

타이핑 애니메이션은 매번 설정된 문자 수에서 중지됩니다. 명령문을 확장하면 중단됩니다. 문을 짧게 하면 설정된 문자 수에 도달할 때까지 계속됩니다. 단계 수(50)를 변경해야 한다는 것을 알고 있지만 실제로는 그 숫자가 아니라 28에서 멈춥니다. @importurl('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Source+Code+Pro:wght@200&

P粉285587590 2024-03-20 00:25:06 0  1  413

angular.js - keydown 이벤트를 처리하기 위한 각도 및 jquery 플러그인이 모두 있습니다.

온라인에서 jq 플러그인을 다운로드했는데 입력 상자가 클릭 이벤트에 바인딩되어 있지만 제가 직접 작성한 각도 스크립트도 동일한 입력 상자에서 ng-keydown을 사용합니다. . . Angular의 키다운 처리 기능이 실행될 줄 알았는데, 안 되더라구요. . . 하지만 플러그인의 클릭 이벤트 핸들러를 넣을 수는 없습니다...

漂亮男人 2017-05-15 17:08:07 0  2  639

javascript - svg 초보자, svg에 그림을 삽입하고 싶습니다

코드는 위와 같습니다. svg에 그림을 삽입하고 그림에 애니메이션을 적용하고 싶지만 효과가 없습니다.

代言 2017-06-24 09:44:02 0  1  863

angle.js - ng-show 표현 동적 디스플레이

양식 입력 입력 상자에서 검색 상자를 클릭하면 프롬프트 내용이 표시됩니다. 다른 곳을 클릭하면 프롬프트 내용이 사라집니다. {code...} 검색 상자를 클릭하면 구체적인 효과가 표시됩니다. 프롬프트 내용이 표시됩니다. 안내해 주세요. 감사합니다.

怪我咯 2017-05-15 17:04:02 0  1  543

javascript - 페이지 로딩 애니메이션 효과가 표시되지 않나요?

1. 현재 작업 중인 프로젝트는 데이터 테이블 페이지입니다. 백그라운드 쿼리가 오래 걸리기 때문에 사용자 경험을 향상시키기 위해 로드 애니메이션을 추가합니다. 애니메이션 로딩을 위한 플러그인에는 문제가 없지만 메소드 실행 중에 애니메이션 효과가 없는 것으로 확인되었습니다. 2. 코드를 직접 붙여넣으세요. JS 시작하기...

迷茫 2017-05-19 10:18:28 0  4  697

테두리 그라디언트는 border-radius와 호환됩니까?

둥근 테두리(테두리 반경)로 입력 상자의 스타일을 지정하고 테두리에 그라데이션 효과를 추가하려고 합니다. 그라데이션과 둥근 테두리를 성공적으로 만들 수 있지만 동시에 둘 다 만들 수는 없습니다. 둥근 모서리가 있지만 그라데이션이 없거나, 그라데이션이 있지만 둥근 모서리가 없습니다. -webkit-border-radius:5px;-webkit-border-image:-webkit-gradient(선형,00,0100%,from(#b0bbc4),to(#ce

P粉824889650 2023-08-21 20:39:38 0  2  486

입력 텍스트 상자 닫기: 값 변경 시 ReactJs 작업

다음과 같은 문제가 있습니다. 입력 텍스트 상자가 있고 바코드를 스캔하고 있습니다. 그러나 텍스트 상자는 자동으로 닫히지 않습니다. 키보드를 사용하여 숫자를 입력하면 자동으로 닫힙니다. 내가 뭐 잘못 했어요? 스캐너가 너무 빠른가요? 어떤 아이디어가 있나요? const[open,setOpen]=useState(false);constonValueChange=(event)=>{if(event.target.value.length===16){setOpen(false);}}

P粉386318086 2023-09-08 23:29:17 0  1  607

javascript - vuejs의 변수를 기반으로 다양한 CSS 스타일을 참조하는 방법

이전 프로젝트를 Vue 프레임워크로 변경해야 합니다. 이제 우리는 CSS와 모든 것을 갖췄습니다. 이제 변수를 기반으로 다양한 CSS 파일을 소개하고 싶습니다. ''xxx.css}에서 if(){//import'의 논리적 효과와 유사합니다. 여러분께 묻고 싶습니다. vue 프레임워크에서 구현할 수 있나요, 아니면 웹팩을 통해 구현할 수 있나요?

曾经蜡笔没有小新 2017-07-05 10:37:08 0  1  639

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

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

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