모바일의 버튼이 계속 초점을 맞추거나 활성 상태를 유지하여 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  522

버튼 활성화로 인해 호버 효과가 오작동함

저는 웹 개발의 기초(HTML, CSS, JS)를 배우려고 노력해왔기 때문에 작동하는 Apple 계산기를 만들어 보려고 노력해 왔습니다. 작은 버그를 발견하기 전까지는 모든 것이 잘 작동했습니다. 처음에는 액션 버튼의 호버 효과가 훌륭하게 작동했는데, 호버를 올리면 색상이 더 밝아졌습니다. 버튼을 누르면 버튼이 더 밝아지고 사용자가 이전 번호로 작업을 수행하기 위해 다른 번호(또는 "같음" 버튼)를 입력할 때까지 그 상태를 유지합니다. 그 후에는 작업 버튼이 일반 색상으로 변경됩니다. 그때까지는 모든 것이 괜찮았지...

P粉548512637 2024-04-01 21:51:26 0  1  556

CSS에서 버튼 누르기 효과를 얻는 올바른 방법

CSS를 사용하여 피아노 레이아웃을 만들고 있습니다. 저는 이 "버튼 누름" 효과를 정말 좋아하지만 주변 요소가 변경됩니다. 이 상황을 피하는 방법은 무엇입니까? <main><divid="o-2"class="octave"><buttonid="C2"class="Ckey"></button><buttonid=&

P粉004287665 2023-09-09 13:38:06 0  2  618

버튼을 클릭할 때 이 애니메이션 클래스를 모달에 어떻게 추가할 수 있나요?

모달에서 "x" 버튼을 클릭하면 애니메이션이 발생하기를 원하지만 현재는 애니메이션이 없이 모달이 닫히고 모달을 다시 열면 아무 것도 클릭하지 않고 애니메이션이 발생하는 상황이 발생합니다. 이것은 현재 애니메이션 클래스 코드입니다. .scale-out-center{-webkit-animation:scale-out-center0.3scubic-bezier(0.550,0.085,0.680,0.530)both;animation:scale-ou

P粉064448449 2024-03-30 22:05:19 0  1  465

java - 양쪽에 버튼을 구현합니다. 중간에 있는 콘텐츠를 전환하려면 이 효과를 어떻게 얻을 수 있나요?

양쪽에 버튼을 구현합니다. 버튼을 클릭하면 중간에 프래그먼트가 될 수 있습니다. 이 효과를 얻으려면 어떻게 해야 할까요? 다른 솔루션을 찾고 있습니다.

習慣沉默 2017-05-16 13:33:43 0  2  849

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

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

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

javascript - Apple 휴대폰에서 CSS3 애니메이션 효과를 표시할 수 없습니다. 어떻게 해결하나요?

애니메이션 효과는 animate.css를 통해 구현됩니다. Android 휴대폰의 브라우저는 물론 WeChat 및 QQ도 모두 정상적으로 실행됩니다. 그러나 Apple 휴대폰에는 호환성 문제가 있습니다. 온라인 주소 https://ipukr.cn/ad/index.htm...

巴扎黑 2017-07-06 10:37:34 0  3  1427

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

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

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

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

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

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

css3 - 전환 변환의 초기 표시:블록에 이동 효과가 없는 이유는 무엇입니까?

https://jsfiddle.net/zjmove/2... ---xiaoboost의 답변을 읽은 후---결국 이것이 가장 적절한 변경입니다: https://jsfiddle.net/25d3ga9j... 나는 하지 않았습니다 사실, 다음 애니메이션은 필요하지 않으며 왼쪽에서 오른쪽으로의 효과만 있습니다. 초기 디스플레이가 왜:blo...

PHPz 2017-05-16 13:24:58 0  1  1284

HTML 마크업에서 SVG를 직접 사용하면 버튼에 역할을 할당하거나 원하는 호버 효과를 얻을 수 없습니다.

두 가지 기능을 수행해야 하는 아이콘이 있는 컨테이너가 있습니다. 버튼처럼 작동합니다(키보드/스크린 리더 등을 통해 액세스 가능). 호버/포커스 시 빨간색으로 전환 마크업에서 SVG를 직접 사용할 때 호버 정지 효과 예상대로 작동하지만 img 태그를 사용할 때처럼 SVG에 버튼 역할을 할당할 수 없습니다: .container{height:500px;width:400px; background-color:lightblue;position:relative;}.favorite

P粉940538947 2023-09-06 20:29:59 0  1  581

애니메이션 콘텐츠 숨기기 및 표시: 전환 효과가 포함된 HTML 페이지 만들기

페이지 넘김 애니메이션을 사용하여 책 형태로 콘텐츠를 표시하는 웹사이트를 만들려고 합니다. 각 "페이지"의 콘텐츠에 대해 애니메이션을 적용할 수 있는 다양한 SVG 이미지가 있습니다. 이 작업을 수행하는 방법을 잘 모르겠습니다. 기본적으로 각 "페이지"에 대해 html 파일을 만들지 않고도 원하는 방식으로 콘텐츠를 표시하고 숨길 수 있는 방법이 있습니까? 순서가 약간 중요합니다. Google이 내 사이트를 임의의 위치에 연결하는 것을 원하지 않습니다. 감사해요! 회전식 슬라이드쇼를 생각하고 있는데...

P粉674757114 2023-09-10 17:41:45 0  1  674

javascript - 애니메이션을 표시하고 숨길 수 있는 좋은 솔루션이 있습니까?

예: 이 애니메이션과 동일한 효과가 있습니다. 먼저 div가 숨겨지고, 버튼을 클릭하면 애니메이션 효과가 나타납니다. 하지만 확실히 너무 복잡하게 작성했습니다. 더 간단한 솔루션이 있습니까(타사 라이브러리가 필요하지 않음)?

阿神 2017-06-30 09:59:55 0  5  1050

그림자 복제 버전으로 메뉴 버튼을 x 모양으로 변환하는 호버 효과 만들기

먼저 제 제목이 혼란스럽다는 점을 인정하고 죄송합니다. 내가 달성하고 싶은 것은 hover에 대한 다음과 같은 효과입니다. 내 웹 사이트는 여기 https://wordpress-493302-3130963.cloudwaysapps.com/입니다. CSS 전환을 사용하여 달성하려는 목표의 절반을 성공적으로 달성했지만 그림자를 볼 수 없습니다. 위 이미지에 표시된 대로 만들기 버튼의 복사본입니다. 내 CSS는 다음과 같습니다.cta-button-menu:hover{transform:rotateZ(45deg)

P粉546257913 2024-04-04 11:55:21 0  2  456

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

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

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

jquery 토글 너비 애니메이션을 중간에 중지하고 다시 닫는 방법은 무엇입니까?

이 질문이 혼란스러울 수도 있지만 예를 들어 보겠습니다. 너비를 전환하는 버튼을 클릭하면 버튼을 누른 후에도 div가 계속 애니메이션을 실행하는데 이는 이상해 보이지 않습니다. 내가 원하는 것은 div가 중간에 멈추고 다른 방향으로 이동하고 버튼을 다시 눌렀을 때 기존 애니메이션이 완료되지 않는 것입니다. $(document).ready(function(){$('.menuToggle').click(function(){$(".menuContainer").anim

P粉238355860 2024-03-19 23:49:40 0  2  391

Vue.js에서 버튼을 클릭하면 애니메이션이 무작위로 생성됩니다.

세 개의 lottie 플레이어 json 애니메이션 파일이 있습니다. congratulations1.json, congratulations2.json 및 congratulations3.json 애니메이션은 다음과 같습니다. 축하합니다 1: <lottie-playerv-if="showPlayer1" class="justify-content-center" src=" ./../../

P粉722521204 2024-03-27 23:57:52 0  1  379

javascript - 모바일 단말기 붙여넣기 이벤트, 앱에서 onpaste 이벤트가 유효하지 않음, 앱에서 붙여넣기 이벤트를 감지하는 방법

모바일 단말기 붙여넣기 이벤트, 앱에서 붙여넣기 이벤트가 유효하지 않은 경우 앱에서 붙여넣기 이벤트를 모니터링하는 방법, 즉 인증코드를 붙여넣은 후 인증코드 입력을 위한 텍스트 상자의 값을 모니터링합니다. 비어 있지 않으면 다음 버튼을 사용할 수 있습니다. 그렇지 않으면 다음 버튼을 클릭할 수 없습니다. onpaste를 사용하여 모니터링하세요...

黄舟 2017-05-16 13:23:57 0  1  775

javascript - js에서 전환 효과를 만드는 방법은 무엇입니까?

저는 js에 대해 잘 모르는데, js를 사용하여 버튼을 클릭했는데 5초 후에 div가 오른쪽의 500px로 이동하면 이 효과를 만드는 아이디어는 무엇인지 알려주세요. 이러한 모든 효과를 얻으려면 먼저 클래스를 작성한 다음 js를 사용하여 className을 전환해야 합니까? 그런데 클릭 이벤트가 발생하면...

滿天的星座 2017-06-26 10:54:58 0  6  968

REACT 구성 요소의 스타일 문제

그림에 표시된 3개 버튼 구성 요소의 경우 기본 JS 및 REACT를 사용하여 버튼 중 하나를 클릭하여 스타일을 변경하는 간단한 방법을 어떻게 작성할 수 있습니까? 그리고 다른 버튼을 클릭해도 동일한 효과를 얻을 수 있습니다. (즉, 다른 두 버튼의 스타일을 지우고 클릭 버튼의 스타일을 추가하는 것입니다.)

巴扎黑 2017-07-05 10:50:54 0  3  879