여러 속성을 가진 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;
}
                                 

자바 스크립트로 쇼 클래스를 추가합니다. 요소가 더 높아지고 표시되지만 전환되지는 않습니다. 최신 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;
                                 

다음은 간단한 예 입니다. 여기에 delay 속성 이있는 또 다른 것이 있습니다.

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

결론 : 그냥 사용하십시오. 이 속성의 특성은 모든 응용 프로그램에서 깨지지 않으며 호환성은 이제 전 세계적으로 94 %를 훨씬 초과합니다.

그래도 확인하려면 http://caniuse.com/css-transitions를 참조하십시오.

출처 : https://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties