【SCSS】CSS로 화살표에 애니메이션을 붙인다

안녕하세요! 오늘도 계속 프런트 구현 중에서 편리한 CSS 발견했기 때문에 비망록으로서.

버튼을 가리키면 화살표가 움직이기를 원합니다.

완성형

sample.html.haml .mypage-nav__list %li.mypage-nav__list-item 내 페이지 .mypage-nav__list-icon.fas.fa-chevron-right sample.scss .mypage-nav{ &__list li { border-top: 1px solid #eee; } &__list-item { box-sizing: border-box; position: relative; display: block; min-height: 48px; padding: 16px; background: #fff; font-size: 14px; color: #333; } &__list-icon{ position: absolute; top: 50%; right: 16px; color: #ccc; } } jquery를 사용하여 구현한다고 생각하고 참고 기사를 조사했지만, 왠지 css만 갈 수 있을 것 같은 생각이 들었다. teratrail에, jQery의 코드는 여러 줄에 걸쳐 있기 때문에 쉽지 않다고 생각합니다. 또한 jQuery에서 처음부터 코드를 작성하면 나름대로 번거롭습니다. CSS로 구현할 수 있으면 JavaScript 측에서 조작하는 코드도 짧아지기 때문에 웹 제작자의 부담은 확실히 줄어듭니다. htps : // 놀라운 l. 코 m / 쿠에 s 치온 s / 15061

게다가 일부 저스펙스 마호라면 js의 애니메이션은 따끈따끈 하는 일이 있는 것 같다. 렌더링 처리를 할 때, js는 CPU만으로 처리합니다만 css는 GPU를 병용해 처리하는 것 같아 움직임이 매끄러워진다는 것.
렌더링文字のデータを読み取って、実際の画面に映る画像や映像などに変換すること。文字データが読み取られ、レンダリングされた結果、ブラウザ上に画像がでる。レンダリング処理の回数を減らす = 最適化につながる。らしい。

역시 처음부터 잘 안 돼

처음에는 FontAwesome 부분에 hover 속성으로 움직임을 붙였지만 화살표 부분에 마우스를 타지 않으면 움직임을 낼 수 없다. 그러면 모처럼 구현해도 사용성 있게 의미가 없다. 일부러 화살표 움직이고 싶기 때문에 화살표 부분에만 마우스 오버하는 사람 없지요.

상자에 마우스를 타면 화살표가 움직이기를 원합니다.

라는 것은 화살표를 스스로 만든다.
가짜 요소::after로 내 페이지의 문자 뒤에 →를 만든다.

sample.scss

  .mypage-nav__list-item::after {
    position: absolute;
    top: 50%;
    right: 13px;
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .2s;
  }

sample.html.haml

.mypage-nav__list
  %li.mypage-nav__list-item
    マイページ
    //fontAwesomeの矢印は削除する

sample.scss

  mypage-nav__list-item:hover::after {
    right: 9px;
    border-left-color: black;
  }

이제 상자에 호버했을 때 화살표가 오른쪽으로 조금 움직이는 액션
나머지는 배경색이 변경되도록합니다.

sample.scss

  &__list-item:hover {//ホバーしたら背景色を変化させる
    background: #eeeeee;
  }

완성 코드

sample.scss

.mypage-nav{
  &__list li {
    border-top: 1px solid #eee;
  }
  &__list-item {
    box-sizing: border-box;
    position: relative;
    display: block;
    min-height: 48px;
    padding: 16px;
    background: #fff;
    font-size: 14px;
    color: #333;
  }
  &__list-item::after {// list-item(「マイページ」等の文字後ろ)へ矢印(::after)を作成
    position: absolute;
    top: 50%;
    right: 13px;
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .2s;
  }
  &__list-item:hover::after {// ホバーしたら矢印(::after)動く
    right: 9px;// デフォルト位置より4px分右に動く
    border-color: black;// デフォルトの灰色から黒色へ変化させる
  }
  &__list-item:hover {//ホバーしたら背景色を変化させる
    background: #f7f6fb;
  }
}

참고

화살표 모양 여러 가지

px, em, rem, % 사이즈 지정

css 애니메이션 요약

요약

지금의 태스크가 프런트 실장이므로 이것을 계기로 여러가지 공부할 수 있어 이전보다는 스킬 업하고 있다고 생각합니다. 프런트·백엔드·서버와 공부하는 것이 많이 있지만, 1개씩 몸에 익혀 가서 개인 어플의 개발에 살려 갑니다!

끝