Css “如何产生效果”；“覆盖”；当显示菜单时，在页面的其余部分？

我创建了一个显示“Callapse”菜单的导航栏。 菜单从右到右显示，转换为0.5s 当显示菜单时，我在屏幕的其余部分添加了“覆盖”效果

我希望这种“叠加”效果以0.5秒的时间从右向左过渡到我的菜单

如何做到这一点

#navbar-collapse {
    z-index: 1031;
    position: fixed;
    top: 0;
    left: 0;
    float: left;
    width: 250px;
    height: 100% !important;
    border-right: 1px solid #000000;
    border-top: 0;
    background: #ffffff;
    overflow-x: hidden;
    transition: 0.5s;
}

#navbar-collapse::after {
    z-index: 1029;
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    left: 250px;
    top: 0;
    transition: 0.5s;
}

Voici les modèles de ma page Drupal 8：

{#
/**
 * @file
 * Default theme implementation to display a single page.
 *
 * The doctype, html, head and body tags are not in this template. Instead they
 * can be found in the html.html.twig template in this directory.
 *
 * Available variables:
 *
 * General utility variables:
 * - base_path: The base URL path of the Drupal installation. Will usually be
 *   "/" unless you have installed Drupal in a sub-directory.
 * - is_front: A flag indicating if the current page is the front page.
 * - logged_in: A flag indicating if the user is registered and signed in.
 * - is_admin: A flag indicating if the user has permission to access
 *   administration pages.
 *
 * Site identity:
 * - front_page: The URL of the front page. Use this instead of base_path when
 *   linking to the front page. This includes the language domain or prefix.
 *
 * Navigation:
 * - breadcrumb: The breadcrumb trail for the current page.
 *
 * Page content (in order of occurrence in the default page.html.twig):
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title: The page title, for use in the actual content.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 * - messages: Status and error messages. Should be displayed prominently.
 * - tabs: Tabs linking to any sub-pages beneath the current page (e.g., the
 *   view and edit tabs when displaying a node).
 * - action_links: Actions local to the page, such as "Add menu" on the menu
 *   administration interface.
 * - node: Fully loaded node, if there is an automatically-loaded node
 *   associated with the page and the node ID is the second argument in the
 *   page's path (e.g. node/12345 and node/12345/revisions, but not
 *   comment/reply/12345).
 *
 * Regions:
 * - page.header: Items for the header region.
 * - page.navigation: Items for the navigation region.
 * - page.navigation_collapsible: Items for the navigation (collapsible) region.
 * - page.highlighted: Items for the highlighted content region.
 * - page.help: Dynamic help text, mostly for admin pages.
 * - page.content: The main content of the current page.
 * - page.sidebar_first: Items for the first sidebar.
 * - page.sidebar_second: Items for the second sidebar.
 * - page.footer: Items for the footer region.
 *
 * @ingroup templates
 *
 * @see template_preprocess_page()
 * @see html.html.twig
 */
#}
{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %}
{# Navigation (collapsible) #}
{% if page.navigation_collapsible %}
  <div id="navbar-collapse" class="navbar-collapse collapse width">
    {{ page.navigation_collapsible }}
  </div>
{% endif %}
{# Navbar #}
{% if page.navigation or page.navigation_collapsible %}
  {% block navbar %}
    {%
      set navbar_classes = [
        'navbar',
        theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default',
        theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class : container,
      ]
    %}
    <header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar" role="banner">
      {% if not navbar_attributes.hasClass(container) %}
        <div class="{{ container }}">
      {% endif %}
      <div class="navbar-header">
        {{ page.navigation }}
        {# .btn-navbar is used as the toggle for collapsed navbar content #}
      </div>

      {% if not navbar_attributes.hasClass(container) %}
        </div>
      {% endif %}
    </header>
  {% endblock %}
{% endif %}

{# Main #}
{% block main %}
  <div role="main" class="main-container {{ container }} js-quickedit-main-content">
    <div class="row">

      {# Header #}
      {% if page.header %}
        {% block header %}
          <div class="col-sm-12" role="heading">
            {{ page.header }}
          </div>
        {% endblock %}
      {% endif %}

      {# Sidebar First #}
      {% if page.sidebar_first %}
        {% block sidebar_first %}
          <aside class="col-sm-3" role="complementary">
            {{ page.sidebar_first }}
          </aside>
        {% endblock %}
      {% endif %}

      {# Content #}
      {%
        set content_classes = [
          page.sidebar_first and page.sidebar_second ? 'col-sm-6',
          page.sidebar_first and page.sidebar_second is empty ? 'col-md-9',
          page.sidebar_second and page.sidebar_first is empty ? 'col-md-9',
          page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12'
        ]
      %}
      <section{{ content_attributes.addClass(content_classes) }}>

        {# Highlighted #}
        {% if page.highlighted %}
          {% block highlighted %}
            <div class="highlighted">{{ page.highlighted }}</div>
          {% endblock %}
        {% endif %}

        {# Breadcrumbs #}
        {% if breadcrumb %}
          {% block breadcrumb %}
            {{ breadcrumb }}
          {% endblock %}
        {% endif %}

        {# Action Links #}
        {% if action_links %}
          {% block action_links %}
            <ul class="action-links">{{ action_links }}</ul>
          {% endblock %}
        {% endif %}

        {# Help #}
        {% if page.help %}
          {% block help %}
            {{ page.help }}
          {% endblock %}
        {% endif %}

        {# Content #}
        {% block content %}
          <a id="main-content"></a>
          {{ page.content }}
        {% endblock %}
      </section>

      {# Sidebar Second #}
      {% if page.sidebar_second %}
        {% block sidebar_second %}
          <aside class="col-md-3" role="complementary">
            {{ page.sidebar_second }}
          </aside>
        {% endblock %}
      {% endif %}
    </div>
  </div>
{% endblock %}

{% if page.footer %}
  {% block footer %}
    <footer class="footer {{ container }}" role="contentinfo">
      {{ page.footer }}
    </footer>
  {% endblock %}
{% endif %}

{#
/**
*@file
*显示单个页面的默认主题实现。
*
*doctype、html、head和body标记不在此模板中，而是
*可以在该目录的html.html.twig模板中找到。
*
*可用变量：
*
*一般效用变量：
*-base_path：Drupal安装的基本URL路径。通常为
*“/”除非您在子目录中安装了Drupal。
*-is_front：指示当前页面是否为首页的标志。
*-已登录：指示用户是否已注册和登录的标志。
*-is_admin：指示用户是否具有访问权限的标志
*管理页面。
*
*站点标识：
*-首页：首页的URL。在
*链接到首页。这包括语言域或前缀。
*
*导航：
*-面包屑：当前页面的面包屑轨迹。
*
*页面内容（按默认页面.html.twig中出现的顺序）：
*-title_前缀：由模块填充的附加输出，用于
*显示在模板中显示的主标题标记前面。
*-标题：页面标题，用于实际内容。
*-title_后缀：由模块填充的附加输出，用于
*显示在模板中显示的主标题标记之后。
*-消息：状态和错误消息。应突出显示。
*-选项卡：链接到当前页面下任何子页面的选项卡（例如
*显示节点时查看和编辑选项卡）。
*-操作链接：页面的本地操作，如菜单上的“添加菜单”
*管理界面。
*-节点：完全加载的节点，如果有自动加载的节点
*与页面和节点ID关联的是
*页面路径（例如节点/12345和节点/12345/修订版，但不是
*评论/答复/12345）。
*
*区域：
*-page.header：标题区域的项目。
*-page.navigation：导航区域的项目。
*-page.navigation\u可折叠：导航（可折叠）区域的项目。
*-page.highlighted：突出显示的内容区域的项目。
*-page.help：动态帮助文本，主要用于管理页面。
*-page.content：当前页面的主要内容。
*-page.sidebar_first：第一个侧栏的项目。
*-page.sidebar_second：第二个侧边栏的项目。
*-page.footer：页脚区域的项目。
*
*@ingroup模板
*
*@参见模板预处理页面（）
*@see html.html.twig
*/
#}
{%set container=theme.settings.fluid_container？'container fluid'：'container%}
{#导航（可折叠）}
{%if page.navigation_可折叠%}
{{page.navigation_collapsable}}
{%endif%}
{#导航栏}
{%if page.navigation或page.navigation_可折叠%}
{%block navbar%}
{%
设置导航栏\u类=[
“导航栏”，
theme.settings.navbar_inverse？'navbar inverse'：'navbar default'，
theme.settings.navbar_position？'navbar-'~theme.settings.navbar_position | clean_class:container，
]
%}
{%如果不是navbar_属性。hasClass（容器）%}
{%endif%}
{{page.navigation}
{#.btn导航栏用作折叠导航栏内容的切换}
{%如果不是navbar_属性。hasClass（容器）%}
{%endif%}
{%endblock%}
{%endif%}
{#Main}
{%block main%}
{#标题}
{%if page.header%}
{%块头%}
{{page.header}}
{%endblock%}
{%endif%}
{#边栏第一}
{%if page.sidebar_first%}
{%block侧边栏_first%}
{{page.sidebar_first}
{%endblock%}
{%endif%}
{#内容}
{%
设置内容\u类=[
page.sidebar_第一页和page.sidebar_第二页？'col-sm-6'，
page.sidebar_first和page.sidebar_second为空？'col-md-9'，
page.sidebar_second和page.sidebar_first为空？'col-md-9'，
page.sidebar_first为空，page.sidebar_second为空？'col-sm-12'
]
%}
{突出显示}
{%if page.highlighted%}
{%块突出显示%}
{{page.highlighted}}
{%endblock%}
{%endif%}
{#面包屑}
{%if面包屑%}
{%block breadcrumb%}
{{breadcrumb}
{%endblock%}
{%endif%}
{#动作链接}
{%if action_links%}
{%block action_links%}
{{action\u links}
{%endblock%}
{%endif%}
{帮助}
{%if page.help%}
{%block help%}
{{page.help}
{%endblock%}
{%endif%}
{#内容}
{%block content%}
{{page.content}}
{%endblock%}
{#第二个侧边栏}
{%if page.sidebar_second%}
{%block侧边栏_second%}
{{page.sidebar_second}}
{%endblock%}
{%endif%}
{%endblock%}
{%if page.footer%}
{%block footer%}
{{page.footer}}
{%endblock%}
{%endif%}

您只需将

宽度从0%增加到100%，这将使其看起来像是在滑入。同时将伪元素定位到右侧