小编Xan*_*ous的帖子

我想要实现的是一个按钮

完成后，我需要在悬停时设置动画。我能找到的最接近的例子是这个代码笔

https://codepen.io/Chester/pen/QPoyjN

问题是::after需要在按钮上应用白色背景

按钮的大小可能会根据文本长度而变化，因此此处给出的解决方案无效： 仅使用 CSS 旋转边框

这是我到目前为止所得到的，目标是保持类似的动画但删除白色背景

.background {
  width: 600px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("https://via.placeholder.com/600");
}

.button-file {
  display: block;
  position: relative;
  text-align: center;
  z-index: 0;
  border-radius: 30px;
  max-width: 363px;
  max-height: 46px;
  border-radius: 30px;
  overflow: hidden;
  padding: 1rem 2rem;
}

.button-file::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 400px;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, …

我目前正在创建一个使用vue-leaflet（vue3 兼容版本）的 vue3 cli 应用程序

一切都在我的本地开发环境中运行良好，但是一旦我的应用程序构建完成，地图就不会加载，即使我像这个线程解释得那样调整大小。

我尝试使用该leafletObject.invalidateSize()方法但没有任何改变。

我的地图是一个在第一次调用时使用 v-if 调用的组件（在列表视图和地图之间切换），并在初始化后使用 v-show

  <transition name="fade" mode="out-in">
    <Map v-if="mapInit"
         v-show="(!mobileView && !listing) ||
          (mobileView && !listing && !getFiltresMobile)"
         :liste="getFilteredList"/>
  </transition>

这是我在使用开发版本时得到的结果npm run serve

这是产品版本的结果

这是我的代码的相关部分，如果您认为需要显示更多代码，我可以添加更多内容

<template>

  <div id="map">
    <l-map v-if="!loading" :style="mapHeight" :zoom="zoom" :center="centerValue" :options="{tap : false}" ref="map">
      <l-tile-layer :url="url"></l-tile-layer>
      <l-marker v-for="(marqueur) in mapData" :key="marqueur.id" :visible="isFiltered(marqueur)" :lat-lng="marqueur.latLng" :ref="setMarkerRefs" @click="markerClick(marqueur.latLng)">
        <l-icon :icon-url="checkActive(marqueur.latLng)" :icon-size="[30 , 37]" :popup-anchor="popupUpPosition" :icon-anchor="[15, 37]"/>
        <l-popup :options="popupoptions">
          <MarqueurPopup :contenu="marqueur"/>
        </l-popup>
      </l-marker>
    </l-map>
    <Loader v-if="loading"/>
  </div> …