transition & transform

遷移プロパティ

transition-property ,  transition-duration ,  transition-timing-function  第二課  transition-delayのショートカット・プロパティ.
このプロパティは、要素の2つのステータス間で変更できます.
要素のステータスは、仮想クラスまたはJavaScriptを使用して動的に作成されます.

Syntax

Example: transition: margin-left 4s;属性個数属性値1属性値2属性値3属性値4属性値2属性値2属性名持続時間属性3属性名持続時間遅延時間属性4属性名持続時間関数名遅延時間

属性の変換

CSS 3では、transform属性を用いてHTML要素の大きさ、角度、位置等を新たに変換することができる

変換方法の提供

translate()

現在位置で要素を移動

rotate()

現在位置に応じて要素を回転

scale()

現在のサイズに応じて要素を拡大縮小

skew()

matrix()

transform-origin

変換の基準位置を指定

要素の左上隅がRef位置

X、Y軸方向要素の大きさを100%とすると、左上隅から移動する長さn%の位置が新しい変形基準点

になります.

実習

上の効果を見てみましょう(それは私が作ったのです)😁😁😁😁😁😁😁😁😁)

1.box要素のフォント色を変更する

const SelectButton = styled.button`
  margin: 5px 0;
  line-height: 19px;
  text-align: left;
  padding: 5px 5px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  font-family: 'NanumBarunGothic';
  background: none;
  position: relative;
  color: #000;
  transition: color 0.4s linear;
  z-index: 2;
  /* border: 1px solid transparent; */
  border-radius: 20px;

  &:hover {
    color: white;
  }

  &::before {
    content: '';
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: ${props => props.theme.buttonBlue};
    z-index: -1;
    transition: transform 0.5s;
    transform-origin: 0 0;
    transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
    transform: scaleX(0);
  }
  &:hover::before {
    transform: scaleX(1);
  }
`;

背景が青になると、文字の色が白くなるのが見えます.まずこれをセットしましょう
「&:hover{}では、color: white;を入力してスタイルを適用します.
次に、背景には仮想要素が生成され、背景の色が変化する効果があります.この仮想要素は上のbox要素の後ろにあり、背景色を表示します.box要素自体の背景は何でもないはずです.
したがって、background: noneと入力します.
次にbox要素を変換します.
属性値は1番目のcolor属性で、2番目は変換効果を数秒持続させ、3番目は変化の開始と終了プロセスが線形に変化するかどうかの値です.

transition: color 0.4s linear;

これを行うと、カーソルを上に移動したときにフォントの色が変化する効果も現れます.

2.仮想要素の作成

仮想要素の詳細については、別の記事を参照してください。

우선 가상요소를 만들고, 위치는 box요소 좌측 상단에 놓자
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: black;
}

そして私がしなければならない属性は、左側から低い黒い蓋を広げる効果です.

		&::before {
    content: '';
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: -1;
    transition: transform 0.5s;
    transform-origin: 0 0;
    transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
    transform: scaleX(0);
  }
  &:hover::before {
    transform: scaleX(1);
  }

transition: transform 0.5s;:transform属性が変化し、持続時間は0.5秒

transform: scaleX(0);:transformプロパティでscaleX()メソッドを使用

scaleX():CSS X軸方向折り畳み、展開.0完全に折りたたみ、1最大展開

transform-origin: 0 0;:transform効果の開始位置を指定する属性

左上隅(0,0)

center, left, right

x,y=20%40%:要素x,y全長のパーセンテージ

1つしか書かれていない場合、x、yは同じで、Zは0

transition-timing-function:開始から終了までの変化速度時間関数

詳細

z-index説明