사용자 정의 속성이있는 CSS의 타이머 막대

최근에 프로젝트에서 가시 타이머를 구현해야하며 프로젝트에 이미 유사한 타이머 UI 디자인이 참조와 비슷합니다. 사용자는 숫자가 감소하는 것을 볼 필요가 없으며 오히려 "바"가 점차적으로 전체에서 비어있는 것으로 감소하기를 원합니다. "타이머"UI를 구현하는 방법이 여러 가지가 있기 때문에 이것을 언급했습니다. 이 기사는 이러한 모든 방법에 관한 것이 아니라 (Codepen의 검색 결과가 더 도움이 될 것입니다), 오히려 나에게 매우 잘 작동하는 것입니다.

내가 필요한 타이머의 유형은 프로젝트의 "Turn Time"막대라고 불리는 것입니다. 작업을 수행하면 회전 시간이 유발 될 수 있으며 대부분의 후속 작업이 턴 시간이 끝날 때까지 차단됩니다. 따라서 명확한 빨간색 막대 타이머가 올바른 UI 선택입니다. 그것은 사람들에게 리듬과 흐름을 제공하며 타이머의 종료 시간을 "느끼고 다음 작업을 예약 할 수 있습니다.

이 타이머를 설정하는 것은 매우 쉽습니다 ...

향후 컨테이너의 빈 부분을 스타일링 해야하는 경우 부모/자식 요소 구조를 만들어 봅시다.

<div>
  <div></div>
</div>

이제 우리는 내부 바를 스타일로 만 스타일링합니다.

 .round-time-bar div {
  높이 : 5px;
  배경 : 선형 그레이드 (바닥까지, 빨간색, #900);
}

이것은 우리에게 시간 표시기로 사용할 수있는 멋진 빨간색 막대를 제공합니다.

다음으로, 우리는 그것을 계산해야하지만 여기서는 기능을 고려해야합니다. 그러한 타이머는 얼마나 걸리는지 알아야합니다! HTML 에서이 정보를 직접 제공 할 수 있습니다. 그렇다고해서 우리가 JavaScript를 사용 하지 않는다는 의미는 아닙니다. 우리는 그것을 받아들이고 있습니다 . 우리는 "이봐, 자바 스크립트, 우리에게 지속 시간 변수를 주면 나머지를 처리하겠습니다."

<div style="--duration: 5;">
  <div></div>
</div>

실제로이 접근법은 현대 DOM 처리 자바 스크립트에 매우 적합합니다. --variable 이 정확한 한, 언제든지 DOM 요소를 다시 렌더링 할 수 있으며 디자인 이이 상황을 잘 처리 할 수 ​​있습니다. 우리는 이와 같은 변형을 할 것입니다.

이제 애니메이션을 시작합시다. 좋은 소식은 간단하다는 것입니다. 이것은 단일 라인 키 프레임입니다.

 @keyframes 라운드 타임 {
  에게 {
    /* 애니메이션보다 더 효율적`width`*/
    변환 : scalex (0);
  }
}

수평으로 확장 할 때 막대 스타일이 압축되지 않기 때문에 막대를 "압축"할 수 있습니다. 이렇게하면 너비를 애니메이션 할 수 있습니다. 이것은 큰 문제가 아닙니다. 특히 다른 어떤 레이아웃을 읽지 않기 때문입니다.

이제 막대에 적용합니다.

 .round-time-bar div {
  / * ... */
  애니메이션 : 라운드 시간 계산 (var (-기간) * 1s) 단계 (var (-duration)) 앞으로;
  변형-오리진 : 왼쪽 중앙;
}

--duration 변수를 사용하여 애니메이션 지속 시간을 설정하는 방법을 보시겠습니까? 이것은 대부분의 작업을 달성합니다. 또한 "Grid By Grid"를 줄이도록 동일한 수의 steps() 설정하는 데 사용합니다. "Bid-by-frame"은 당신이 좋아하는 시각적 UI 효과 일 수 있지만, JavaScript가 언제든지이 막대를 다시 렌더링 할 수 있다는 아이디어에 적응하고 입찰자가 눈에 띄지 않을 것입니다. 정수를 지속 시간 값으로 사용하여 둘 다 이와 같이 사용할 수있었습니다.

그러나 부드러운 애니메이션을 원한다면 예를 들어 다음과 같이 할 수 있습니다.

<div ...="" data-style="smooth"></div>

그런 다음 steps 사용 하지 마십시오 .

 .round-time-bar [data-style = "smooth"] div {
  애니메이션 : 라운드 시간 계산 (var (-기간) * 1s) 선형 포워드;
}

우리는 또한 선형 애니메이션을 사용하여 타이머에 적합한 것으로 보입니다. 시간은 쉽지 않을 것입니다. 아니면할까요? 어쨌든, 이것은 당신의 선택입니다. 특정 지점에서 가속 또는 감속처럼 보이는 타이머를 원한다면 이동하십시오.

동일한 data-attribute 기반 API를 사용하여 색상 변경을 구현할 수 있습니다.

 .round-time-bar [data-color = "blue"] div {
  배경 : 선형 그레이드 (하단, #64b5f6, #1565c0);
}

마지막 변형은 각 "초"의 너비를 고정하는 것입니다. 이런 식으로 10 초 타이머는 5 초 타이머보다 길게 보입니다.

 .round-time-bar [data-style = "고정"] div {
  너비 : calc (var (-기간) * 5%);
}

다음은 데모입니다.

CSS 애니메이션을 다시 시작하기위한 팁에주의하십시오.

오, 그건 그렇고, 나는 하나가 있다는 것을 알고 있습니다<meter></meter> 요소, 그것은 의미 론적 일 수 있지만, 자체 UI는 내가 원하는대로 애니메이션이 될 수는 없습니다. 적어도 싸우지 않기 위해서. 하지만 더 접근하기 쉬운 지 모르겠어요? 현재 가치를 유용한 방식으로 선언합니까? JavaScript를 사용하여 실시간으로 업데이트하는 경우<meter></meter> , 더 접근 가능한 타이머일까요? 누구든지 알고 있다면 여기에 솔루션을 연결할 수 있습니다.

위 내용은 사용자 정의 속성이있는 CSS의 타이머 막대의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!