여러 속성을 가진 CSS 전환 속기?

여러 속성을 가진 CSS 전환 속기?

여러 속성을 가진 CSS 전환 속기에 대한 올바른 구문을 찾을 수 없는 것 같습니다.이것은 아무 것도 하지 않습니다.

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

자바스크립트로 show class를 추가합니다.그 원소는 점점 더 높아지고 눈에 띄지만, 전이되지 않습니다.최신 Chrome, FF 및 Safari에서 테스트 중입니다.

내가 뭘 잘못하고 있는 거지?

편집: 확실히 하기 위해, 저는 제 CSS를 축소할 속기 버전을 찾고 있습니다.모든 공급업체 접두사로 충분히 부풀어 있습니다.예제 코드도 확장했습니다.

구문:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

시간은 지연이 지정된 경우 지연 전에 와야 합니다.

간단한 선언으로 결합된 개별 전환:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

또는 모든 것을 전환할 수 있습니다.

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

여기 간단한 예가 있습니다.여기 지연 속성이 있는 다른 것이 있습니다.

---

편집: 이전에 여기에 나열된 호환성 및 알려진 문제는 다음과 같습니다.transition가독성을 위해 제거되었습니다.

결론: 그냥 사용하세요.이 속성의 특성은 모든 애플리케이션에서 중단되지 않으며 호환성은 현재 전 세계적으로 94%를 훨씬 초과합니다.

그래도 확인하고 싶다면 http://caniuse.com/css-transitions 을 참조하십시오.

동일한 방식으로 전환하려는 특정 속성이 여러 개 있는 경우(특히 전환하지 않으려는 속성도 있기 때문에),opacity), 다른 옵션은 다음과 같은 작업을 수행하는 것입니다(간단하게 설명하기 위해 생략됨).

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

두 번째 선언은 다음을 재정의합니다.all위에 있는 속기 선언에서 그리고 (기본적으로) 더 간결한 코드를 만듭니다.

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

데모

이것으로 작동하게 했습니다.

.element {
   transition: height 3s ease-out, width 5s ease-in;
}

한 가지 주목할 점은 CSS가transitionMDN 웹 문서에 언급된 바와 같이 속성 자체는 속기입니다.

그transitionCSS 속성은 다음의 약자 속성입니다.transition-property,transition-duration,transition-timing-function,그리고.transition-delay.

이 간단한 방법은 단일 전환의 다양한 구성 속성을 결합하는 것이 이상적입니다.이것을 여러 전환을 결합하는 데 사용하면 둔탁해지기 시작합니다.

따라서 구성 속성이 서로 다른 동일한 요소에 대해 두 개 이상의 전환이 있을 때, 다음을 사용하는 대신 개별적으로 작성하는 것이 더 쉬워집니다.transition속기의예:

다음은 한 요소에 대한 여러 전환의 간단한 버전(옵션 1)입니다.

transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;

보시다시피, 이것은 점점 더 투박해지고 시각화하기가 조금 더 어려워집니다.
동일한 CSS를 다음과 같이 적용할 수 있습니다(옵션 2).

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

물론 궁극적으로 이 모든 것은 소스 코드를 입력하고 유지하는 선호도에 달려 있습니다.하지만 저는 개인적으로 두 번째 옵션을 선호합니다.

---

팁:

이 기능을 사용하면 모든 전환에 대해 구성 속성 중 하나가 동일한 경우 여러 번 언급할 필요가 없습니다.를 들어, 에서어만, , ,▁the약,transition-duration같았음(음▁was같▁the0.5s은 다음과 .

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

불투명도 특성을 전환할 때 .5초의 지연이 발생하면 요소의 높이가 전환되는 동안 완전히 투명(따라서 보이지 않음)하게 됩니다.그래서 여러분이 실제로 보게 될 유일한 것은 불투명도가 변하는 것입니다.따라서 높이 특성을 전환에서 제외하는 것과 동일한 효과를 얻을 수 있습니다.

"전환: 불투명도 .5s;"

그게 당신이 원하는 건가요?만약 그렇지 않다면, 그리고 여러분이 높이 변화를 보고 싶다면, 전환하는 동안 불투명도가 0이 될 수 없습니다.

이를 통해 애니메이션에 필요한 내용만 이해하고 간소화할 수 있었습니다.

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

이는 '.base' 클래스 내의 모든 전환 속성(기간, 전환 타이밍 함수 등)에 적용됩니다.

저는 이것이 효과가 있어야 한다고 생각합니다.

.element {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
}

언급URL : https://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties