2.5 KiB
| title | localeTitle |
|---|---|
| Will Change | سوف يتغير |
سوف يتغير
تسمح لك خاصية will-change بإخبار المتصفح عن التلاعبات التي ستحدث مع العنصر من أجل تحسينها.
.container { will-change: transform; }
سيتم استخدام خاصية will-change في الفئة .container ، في هذه الحالة ، قد يحدث أو لا يحدث التحويل على العنصر.
ومع ذلك ، باستخدام هذه الخاصية هناك تأثير جانبي مثير للاهتمام.
إذا طبقنا على التحويل: translateZ (0) عنصر ، فإن العنصر سيخلق تراكبًا جديدًا للسياق ، وفي بعض المتصفحات ، سيضيف أيضًا طبقة إلى تيار العرض الخاص به ، مما سيعطينا دفعة أداء ، والتي نحققها .
وبالتالي ، باستخدام will-change: transform ، سيقوم المتصفح بإنشاء سياق تراكب جديد ، بغض النظر عما إذا كنا قد طبقنا التحويل إلى العنصر أم لا.
والشيء الأساسي الذي يجب ملاحظته هو أن will-change سيؤدي إلى إنشاء سياق تراكب جديد فقط إذا كان الموقع أيضًا ينشئ سياق تراكب جديد. نظرًا لأن خاصية التحويل تُنشئ سياق تراكب جديد ، فإن will-change: transform سيعمل will-change: transform أيضًا على إنشاء سياق تراكب جديد.
إذا استخدمت will-change: display ، فلن يتم إنشاء سياق تراكب جديد ، نظرًا لأنه لا توجد قيمة لخاصية العرض تخلق تراكبًا جديدًا للسياق.
دعونا ننظر إلى مثال آخر: opacity . لا تعمل التعمية ذات القيمة 1 على إنشاء سياق تراكب جديد ، ولكن سيتم إنشاء قيمة أقل (على سبيل المثال ، 0.9). أثناء تغيير will-change: ستعمل العتامة على أي حال على إنشاء سياق تراكب جديد.