การเปลี่ยนชวเลข 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;

นี่คือตัวอย่างที่ตรงไปตรงมา นี่เป็นอีกหนึ่งที่มีคุณสมบัติความล่าช้า

แก้ไข:transitionระบุไว้ก่อนหน้านี้ที่นี่มีความสามารถและเป็นที่รู้จักในประเด็นที่เกี่ยวข้องกับ นำออกเพื่อความสะดวกในการอ่าน

ด้านล่างบรรทัด: เพียงใช้มัน ธรรมชาติของคุณสมบัตินี้ไม่ทำลายสำหรับแอพพลิเคชั่นทั้งหมด

หากคุณยังต้องการความมั่นใจโปรดดูที่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;
}

ด้วยการหน่วงเวลา. 5s ในการเปลี่ยนคุณสมบัติความทึบองค์ประกอบจะโปร่งใสอย่างสมบูรณ์ (และมองไม่เห็น) ตลอดเวลาที่ความสูงกำลังเปลี่ยน ดังนั้นสิ่งเดียวที่คุณจะเห็นก็คือความทึบเปลี่ยนไป ดังนั้นคุณจะได้รับผลเช่นเดียวกับการออกจากความสูงออกไป:

"การเปลี่ยนแปลง: ความทึบแสง. 5s .5s;"

นั่นคือสิ่งที่คุณต้องการ? ถ้าไม่ใช่และคุณต้องการเห็นการเปลี่ยนความสูงคุณจะไม่มีความทึบของศูนย์ตลอดเวลาที่มันกำลังเปลี่ยนแปลง

สิ่งนี้ช่วยให้ฉันเข้าใจ / เพรียวลมเฉพาะสิ่งที่ฉันต้องการในการเคลื่อนไหว

// 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{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;