32 lines
2.5 KiB
Markdown
32 lines
2.5 KiB
Markdown
---
|
|
title: Will Change
|
|
localeTitle: سوف يتغير
|
|
---
|
|
## سوف يتغير
|
|
|
|
تسمح لك خاصية 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: ستعمل العتامة على أي حال على إنشاء سياق تراكب جديد.
|
|
|
|
#### معلومات اكثر:
|
|
|
|
* [will-change on MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)
|
|
* [سيغير CSS الوحدة النمطية 1 (مسودة العمل)](https://drafts.csswg.org/css-will-change/#will-change)
|
|
* [هل يمكنني استخدام: سيغير CSS الملكية](https://caniuse.com/#feat=will-change) |