ការផ្លាស់ប្តូរ CSS គឺជាវិធីដ៏ល្អមួយដើម្បីបង្កើតអន្តរកម្ម។ វាគ្រប់គ្រាន់ហើយ។, transition ទៅស្ថានភាពដំបូងនៃធាតុមួយ ហើយកម្មវិធីរុករកមានចលនាការផ្លាស់ប្តូររវាងរដ្ឋទាំងពីរ។ ការផ្លាស់ប្តូរសម្រាប់ទំហំធាតុខាងក្នុងដូចជា auto ទោះយ៉ាងណាក៏ដោយ វាជាបញ្ហាសម្រាប់អ្នកអភិវឌ្ឍន៍គេហទំព័រអស់ជាច្រើនទសវត្សរ៍មកហើយ ហើយជម្រើសតែមួយគត់គឺការគណនាកម្ពស់ដោយថាមវន្តដោយប្រើ JavaScript ។
បញ្ហាប្រឈមមួយទៀតគឺការចាប់ផ្តើមដំណើរផ្លាស់ប្តូរនៅពេលដែលធាតុមួយទទួលបានរចនាប័ទ្មដំបូងរបស់វា ដូចជាពេលដែលវាត្រូវបានបន្ថែមទៅ DOM ឬពេលដែល display- តម្លៃនៃ none ការផ្លាស់ប្តូរ។ អត្ថបទនេះពន្យល់ពីរបៀបដោះស្រាយបញ្ហានេះជាមួយនឹងមុខងារ CSS ថ្មីដូចជា calc-size(), interpolate-size, @starting-style និង transition-behavior អាចត្រូវបានគ្រប់គ្រង។
ដំណោះស្រាយជាមួយ calc-size()
ប្រសិនបើនរណាម្នាក់មានធាតុ DOM ដែលមកពីស្ថានភាពបិទ (height: 0) ទៅរដ្ឋបើកចំហ (height: auto) លើសពីនេះ គំនូរជីវចលជាធម្មតាមិនត្រូវបានប្រតិបត្តិទេ បើទោះបីជា transitionទ្រព្យសម្បត្តិត្រូវបានកំណត់។ នេះគឺដោយសារតែកម្មវិធីរុករកមិនគាំទ្រការផ្លាស់ប្តូរទៅទំហំខាងក្នុងដូច auto គាំទ្រ។ ថ្មី។ calc-size()ទោះយ៉ាងណាក៏ដោយ មុខងារអាចឱ្យការគណនាលើបរិមាណខាងក្នុងទាំងនេះ ហើយដូច្នេះក៏មានការផ្លាស់ប្តូរផងដែរ។:
f95f6dcb193aa903adc84ce47bc4a296
នេះ។ calc-size()-Function មិនទាន់មាននៅក្នុង browser ទាំងអស់ទេ។ ការថយក្រោយអាចសម្រេចបានដោយរក្សាភាពដើម height: auto- សេចក្តីប្រកាសអាចសម្រេចបាន។
ដំណោះស្រាយជាមួយ interpolate-size
នេះ។ interpolate-sizeលក្ខណសម្បត្តិអនុញ្ញាតឱ្យអ្នកកំណត់ឥរិយាបថ interpolation នៃកម្មវិធីរុករក និងសម្រេចចិត្តថាតើត្រូវបែងចែករវាងពាក្យគន្លឹះដូចជា auto គួរតែ interpolate ។ តាមលំនាំដើម អន្តរប៉ូលកើតឡើងតែរវាងតម្លៃលេខប៉ុណ្ណោះ។ ជាមួយ allow-keywords ទោះយ៉ាងណាក៏ដោយ អ្នកអាចបើកដំណើរការផ្លាស់ប្តូររវាងពាក្យគន្លឹះ:
f95f6dcb193aa903adc84ce47bc4a296
ដោយអ្នក។ interpolate-size: allow-keywords នៅលើ :rootធាតុ អ្នកធ្វើឱ្យឥរិយាបថថ្មីសម្រាប់ទំព័រទាំងមូល។
ការផ្លាស់ប្តូរពី display:none
បញ្ហាមួយទៀតកើតឡើងនៅពេលដែលធាតុនៃ display:none ការផ្លាស់ប្តូរទៅជារដ្ឋដែលអាចមើលឃើញ។ នៅទីនោះ display មិនមែនជាកម្មសិទ្ធិដែលអាចធ្វើចលនាបានទេ គ្មានចលនាកើតឡើងទេ។ មុខងារ CSS ថ្មីជួយនៅទីនេះ @starting-style និង transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
ជាមួយ transition-behavior: allow-discrete ធានាថាចលនាដំណើរការមុនពេល display- តម្លៃនៃ block នៅលើ none ត្រូវបានប្តូរ។ ច្បាប់ទាំងនេះអនុញ្ញាតឱ្យដំណើរផ្លាស់ប្តូរត្រូវបានប្រតិបត្តិសូម្បីតែក្នុងអំឡុងពេលធ្វើបច្ចុប្បន្នភាពរចនាប័ទ្មដំបូងក៏ដោយ។ នេះ។ @starting-styleច្បាប់ធានាថាចលនាដំណើរការបានត្រឹមត្រូវនៅពេលធ្វើបច្ចុប្បន្នភាពរចនាប័ទ្មដំបូង។
ការគាំទ្រកម្មវិធីរុករក
បច្ចុប្បន្នអចលនទ្រព្យថ្មី។ calc-size() និង interpolate-size មិនទាន់បានគាំទ្រដោយកម្មវិធីរុករកតាមអ៊ីនធឺណិតទាំងអស់នៅឡើយទេ។ នៅក្នុង Chrome ពួកវាមាននៅខាងក្រោយទង់ពិសោធន៍ ប៉ុន្តែមិនទាន់មាននៅក្នុង Safari និង Firefox ទេ។ ដូចគ្នានេះដែរការគាំទ្រសម្រាប់ transition-behavior បង្ហាញនៅក្នុង Chrome និង Edge ប៉ុន្តែមិនមែននៅក្នុង Safari និង Firefox ទេ។ សង្ឃឹមថាវានឹងផ្លាស់ប្តូរនៅពេលអនាគត។