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

javascript로 show 클래스를 추가합니다. 요소가 더 높아지고 표시되며 전환되지 않습니다. 최신 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를 참조하십시오 .

---

같은 방식으로 전환하려는 몇 가지 특정 속성이있는 경우 (예 : 전환 하지 않으려 는 속성이 있기 때문에 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;
}

---

불투명도 전이에 0.5 초 지연을 가짐으로써, 높이가 전이되는 전체 시간 동안 요소는 완전히 투명하게되어 보이지 않게됩니다. 따라서 실제로 볼 수있는 것은 불투명도 변경뿐입니다. 따라서 높이 속성을 전환에서 제외하는 것과 동일한 효과를 얻을 수 있습니다.

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

그것이 당신이 원하는 것입니까? 그렇지 않은 경우 높이 전환을보고 싶은 경우 전체 전환 동안 불투명도를 0으로 설정할 수 없습니다.

---

나는 이것과 함께 일한다고 생각한다.

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

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