main-content-bootstrap动效

https://animate.style/

栏目管理里面配置 animate

      <!--start page wrapper -->
      <div class="page-wrapper">
        <div class="page-content">
          <!-- closable 关闭有问题 -->
          <!-- type="card"  editable tab-position="bottom" :lazy="true" -->
          <el-tabs
            @tab-click="handleClick"
            editable
            v-model="config.tab.activeName"
            type="card"
            @edit="handleTabsEdit"
          >
            <el-tab-pane
              v-for="(tab, i) in tabs"
              :key="tab.name"
              :label="tab.label"
              :name="tab.name"
            >
              <!-- {{tab}} -->
              <iframe
                :key="i"
                v-if="tab.meta.component === 'iframe'"
                :src="tab.attrs.src"
                :meta-query="tab.query"
                :style="tab.attrs.style"
                :class="`app-content-tab ${
                   (tab.attrs||{}).animate || 'animate__animated animate__bounceInUp'
                }`"
              ></iframe>
              <component
                v-else
                :key="i"
                v-bind="tab.attrs"
                v-model="tab.meta"
                v-bind:is="tab.meta.component"
                :meta-query="tab.query"
                :main-popup="popup"
                :main-tabs="tabs"
                @on-change-popup="onChangePoppup"
                @on-change-tabs="onChangeContentTabs"
                :class="`app-content-tab ${
                  (tab.attrs||{}).animate || 'animate__animated animate__bounceInUp'
                }`"
              ></component>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!--end page wrapper -->

<el-drawer
      :append-to-body="false"
      :withHeader="false"
      :direction="popup.direction"
      :size="config.popup.size"
      class="app-nav-popup"
      :visible.sync="config.popup.drawer"
    >
      <el-card class="box-card-popup">
        <div slot="header" class="box-card-popup__header">
          <span>{{ (popup.attrs || {}).label || config.popup.title }}</span>
          <el-button type="text" @click="config.popup.drawer = false">{{
            config.popup.closeLabel
          }}</el-button>
        </div>

        <el-scrollbar
          :class="`app-nav-popup__scrollbar app-nav-popup__${
            popup.meta.popupClass || ''
          }`"
        >
          <iframe
            :key="i"
            v-if="popup.meta.component === 'iframe'"
            :meta-query="popup.query"
            :src="popup.attrs.src"
            :style="popup.attrs.style"
            :class="`box-card-popup__body ${
               (popup.attrs||{}).animate || 'animate__animated animate__bounceInUp'
            }`"
          ></iframe>
          <component
            v-else
            v-bind="popup.attrs"
            v-model="popup.meta"
            :main-popup="popup"
            :main-tabs="tabs"
            :meta-query="popup.query"
            @on-change-popup="onChangePoppup"
            @on-change-tabs="onChangeContentTabs"
            v-bind:is="popup.meta.component"
            :hidde-title="true"
            :class="`box-card-popup__body ${
              (popup.attrs||{}).animate || 'animate__animated animate__bounceInUp'
            }`"
          ></component>
        </el-scrollbar>
      </el-card>
    </el-drawer>