728x90
반응형
질문 : 여러 속성을 가진 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
728x90
반응형
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
Ruby on Rails에서 JSON 출력을 "예쁘게" 형식화하는 방법 (0) | 2021.07.02 |
---|---|
CSS 표시 : inline 과 inline-block의 차이점 (0) | 2021.07.02 |
jQuery로 HTML 문자열 이스케이프 (0) | 2021.07.01 |
이스케이프되지 않은 HTML 문자열 쓰기 / 출력 (0) | 2021.07.01 |
컨트롤러를 두 번 실행하는 AngularJS와의 전투 (0) | 2021.07.01 |