0

正如标题所暗示的那样简单，我不确定为什么转换无法在两个 svg 之间切换。

我在这里想念什么？我将 svg 包装在 div 中，但这根本没有帮助。

任何建议将不胜感激。

干杯!

代码笔： https ://codepen.io/LovelyAndy/pen/MWmyzmm

html

<div id="icon">
  <transition name="fade" mode="out-in"><div v-if="show" 
       @click="show = !show">
    <svg   width="41" height="58" viewBox="0 0 41 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" width="40" height="40" rx="20" fill="#F9F9FF"/>
<path d="M14.9916 56.146C14.8796 56.2393 14.6696 56.3653 14.3616 56.524C14.0629 56.6827 13.6943 56.8227 13.2556 56.944C12.8169 57.0653 12.3316 57.1213 11.7996 57.112C10.9876 57.0933 10.2596 56.9487 9.61559 56.678C8.98093 56.398 8.43959 56.02 7.99159 55.544C7.55293 55.068 7.21693 54.522 6.98359 53.906C6.75026 53.29 6.63359 52.632 6.63359 51.932C6.63359 50.8867 6.84359 49.9627 7.26359 49.16C7.68359 48.3573 8.26693 47.7273 9.01359 47.27C9.76959 46.8127 10.6469 46.584 11.6456 46.584C12.3363 46.584 12.9476 46.6773 13.4796 46.864C14.0116 47.0507 14.4456 47.2513 14.7816 47.466L13.9836 49.384C13.7503 49.2067 13.4376 49.0247 13.0456 48.838C12.6629 48.642 12.2196 48.544 11.7156 48.544C11.1929 48.544 10.7029 48.6887 10.2456 48.978C9.79759 49.2673 9.43359 49.6593 9.15359 50.154C8.88293 50.6393 8.74759 51.1947 8.74759 51.82C8.74759 52.4827 8.87359 53.066 9.12559 53.57C9.37759 54.0647 9.73693 54.452 10.2036 54.732C10.6703 55.012 11.2163 55.152 11.8416 55.152C12.3923 55.152 12.8636 55.0633 13.2556 54.886C13.6476 54.7087 13.9463 54.522 14.1516 54.326L14.9916 56.146ZM19.2793 57.168C18.71 57.168 18.192 57.056 17.7253 56.832C17.268 56.5987 16.904 56.244 16.6333 55.768C16.3626 55.292 16.2273 54.6853 16.2273 53.948C16.2273 53.2573 16.3673 52.66 16.6473 52.156C16.9273 51.652 17.296 51.2647 17.7533 50.994C18.2106 50.714 18.696 50.574 19.2093 50.574C19.816 50.574 20.2733 50.672 20.5813 50.868C20.8986 51.064 21.1506 51.2787 21.3373 51.512L21.4633 50.882H23.2833V57H21.3233V56.244C21.23 56.3373 21.09 56.4587 20.9033 56.608C20.726 56.7573 20.502 56.888 20.2313 57C19.9606 57.112 19.6433 57.168 19.2793 57.168ZM19.8393 55.572C20.5206 55.572 21.0153 55.264 21.3233 54.648V53.15C21.2113 52.8513 21.0153 52.6133 20.7353 52.436C20.4646 52.2587 20.1426 52.17 19.7693 52.17C19.3493 52.17 18.9853 52.3287 18.6773 52.646C18.3693 52.954 18.2153 53.3553 18.2153 53.85C18.2153 54.1767 18.29 54.4707 18.4393 54.732C18.5886 54.9933 18.7846 55.1987 19.0273 55.348C19.2793 55.4973 19.55 55.572 19.8393 55.572ZM27.2909 57.126C26.7869 57.126 26.3156 57.0373 25.8769 56.86C25.4476 56.6827 25.0836 56.4353 24.7849 56.118L25.5969 55.04C25.8956 55.3107 26.1709 55.5067 26.4229 55.628C26.6843 55.74 26.9176 55.796 27.1229 55.796C27.3656 55.796 27.5663 55.7587 27.7249 55.684C27.8836 55.6093 27.9629 55.488 27.9629 55.32C27.9629 55.1613 27.8976 55.0353 27.7669 54.942C27.6456 54.8487 27.4869 54.774 27.2909 54.718C27.0949 54.6527 26.8849 54.5873 26.6609 54.522C26.1009 54.3447 25.6949 54.088 25.4429 53.752C25.2003 53.4067 25.0789 53.0333 25.0789 52.632C25.0789 52.324 25.1583 52.016 25.3169 51.708C25.4849 51.3907 25.7463 51.1293 26.1009 50.924C26.4649 50.7093 26.9316 50.602 27.5009 50.602C28.0143 50.602 28.4483 50.6533 28.8029 50.756C29.1576 50.8587 29.4936 51.0267 29.8109 51.26L29.0689 52.408C28.8916 52.268 28.6909 52.1513 28.4669 52.058C28.2523 51.9553 28.0516 51.8993 27.8649 51.89C27.6129 51.8807 27.4169 51.9273 27.2769 52.03C27.1369 52.1233 27.0669 52.2353 27.0669 52.366C27.0576 52.5433 27.1229 52.6833 27.2629 52.786C27.4123 52.8887 27.5989 52.968 27.8229 53.024C28.0469 53.08 28.2663 53.1453 28.4809 53.22C28.9196 53.3693 29.2696 53.584 29.5309 53.864C29.7923 54.1347 29.9229 54.4987 29.9229 54.956C29.9229 55.3293 29.8249 55.684 29.6289 56.02C29.4423 56.3467 29.1529 56.6127 28.7609 56.818C28.3783 57.0233 27.8883 57.126 27.2909 57.126ZM32.1386 48.194H34.0986V50.854H35.5826V52.38H34.0986V57H32.1386V52.38H31.1866V50.854H32.1386V48.194Z" fill="#1A0050"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6 17.9C16.2627 17.9 16.8 17.3627 16.8 16.7C16.8 16.0373 16.2627 15.5 15.6 15.5C14.9373 15.5 14.4 16.0373 14.4 16.7C14.4 17.3627 14.9373 17.9 15.6 17.9ZM15.6 20.3C17.5882 20.3 19.2 18.6882 19.2 16.7C19.2 14.7118 17.5882 13.1 15.6 13.1C13.6118 13.1 12 14.7118 12 16.7C12 18.6882 13.6118 20.3 15.6 20.3Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.66 21.2C14.6659 21.2 13.86 22.0059 13.86 23L13.86 24.8C13.86 25.4628 13.3227 26 12.6599 26C11.9972 26 11.46 25.4628 11.46 24.8L11.46 23C11.46 20.6804 13.3404 18.8 15.66 18.8C17.9796 18.8 19.86 20.6804 19.86 23V23.6C19.86 24.2628 19.3227 24.8 18.66 24.8C17.9972 24.8 17.46 24.2628 17.46 23.6V23C17.46 22.0059 16.6541 21.2 15.66 21.2Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3998 17.9C25.737 17.9 25.1998 17.3627 25.1998 16.7C25.1998 16.0373 25.737 15.5 26.3998 15.5C27.0624 15.5 27.5998 16.0373 27.5998 16.7C27.5998 17.3627 27.0624 17.9 26.3998 17.9ZM26.3998 20.3C24.4115 20.3 22.7998 18.6882 22.7998 16.7C22.7998 14.7118 24.4115 13.1 26.3998 13.1C28.388 13.1 29.9998 14.7118 29.9998 16.7C29.9998 18.6882 28.388 20.3 26.3998 20.3Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3396 21.2C27.3337 21.2 28.1396 22.0059 28.1396 23V24.8C28.1396 25.4628 28.6769 26 29.3396 26C30.0024 26 30.5396 25.4628 30.5396 24.8V23C30.5396 20.6804 28.6592 18.8 26.3396 18.8C24.02 18.8 22.1396 20.6804 22.1396 23V23.6C22.1396 24.2628 22.6769 24.8 23.3396 24.8C24.0024 24.8 24.5396 24.2628 24.5396 23.6V23C24.5396 22.0059 25.3456 21.2 26.3396 21.2Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0604 24.5C20.0663 24.5 19.2604 25.3059 19.2604 26.3L19.2604 28.1C19.2604 28.7628 18.7231 29.3 18.0603 29.3C17.3976 29.3 16.8604 28.7628 16.8604 28.1L16.8604 26.3C16.8604 23.9804 18.7408 22.1 21.0604 22.1C23.38 22.1 25.2604 23.9804 25.2604 26.3V28.1C25.2604 28.7628 24.7232 29.3 24.0604 29.3C23.3977 29.3 22.8604 28.7628 22.8604 28.1V26.3C22.8604 25.3059 22.0545 24.5 21.0604 24.5Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.0004 21.2C21.6632 21.2 22.2004 20.6628 22.2004 20C22.2004 19.3373 21.6632 18.8 21.0004 18.8C20.3377 18.8 19.8004 19.3373 19.8004 20C19.8004 20.6628 20.3377 21.2 21.0004 21.2ZM21.0004 23.6C22.9887 23.6 24.6004 21.9883 24.6004 20C24.6004 18.0118 22.9887 16.4 21.0004 16.4C19.0122 16.4 17.4004 18.0118 17.4004 20C17.4004 21.9883 19.0122 23.6 21.0004 23.6Z" fill="#712EFF"/>
</svg>
    </div> <div v-else 
       @click="show = !show" >
   <svg width="24" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.6 9.9C7.26274 9.9 7.8 9.36274 7.8 8.7C7.8 8.03726 7.26274 7.5 6.6 7.5C5.93726 7.5 5.4 8.03726 5.4 8.7C5.4 9.36274 5.93726 9.9 6.6 9.9ZM6.6 12.3C8.58822 12.3 10.2 10.6882 10.2 8.7C10.2 6.71178 8.58822 5.1 6.6 5.1C4.61178 5.1 3 6.71178 3 8.7C3 10.6882 4.61178 12.3 6.6 12.3Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66002 13.2C5.66588 13.2 4.85997 14.0059 4.85997 15L4.85996 16.8C4.85996 17.4628 4.3227 18 3.65995 18C2.99721 18 2.45996 17.4628 2.45996 16.8L2.45997 15C2.45998 12.6804 4.34041 10.8 6.66002 10.8C8.9796 10.8 10.86 12.6804 10.86 15V15.6C10.86 16.2628 10.3227 16.8 9.65998 16.8C8.99725 16.8 8.45998 16.2628 8.45998 15.6V15C8.45998 14.0059 7.65411 13.2 6.66002 13.2Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4003 9.9C16.7375 9.9 16.2003 9.36274 16.2003 8.7C16.2003 8.03726 16.7375 7.5 17.4003 7.5C18.0629 7.5 18.6003 8.03726 18.6003 8.7C18.6003 9.36274 18.0629 9.9 17.4003 9.9ZM17.4003 12.3C15.412 12.3 13.8003 10.6882 13.8003 8.7C13.8003 6.71178 15.412 5.1 17.4003 5.1C19.3885 5.1 21.0003 6.71178 21.0003 8.7C21.0003 10.6882 19.3885 12.3 17.4003 12.3Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3401 13.2C18.3342 13.2 19.1401 14.0059 19.1401 15V16.8C19.1401 17.4628 19.6774 18 20.3401 18C21.0029 18 21.5401 17.4628 21.5401 16.8V15C21.5401 12.6804 19.6597 10.8 17.3401 10.8C15.0205 10.8 13.1401 12.6804 13.1401 15V15.6C13.1401 16.2628 13.6774 16.8 14.3401 16.8C15.0029 16.8 15.5401 16.2628 15.5401 15.6V15C15.5401 14.0059 16.3461 13.2 17.3401 13.2Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0599 16.5C11.0658 16.5 10.2599 17.3059 10.2599 18.3L10.2599 20.1C10.2599 20.7628 9.7226 21.3 9.05985 21.3C8.39712 21.3 7.85986 20.7628 7.85986 20.1L7.85988 18.3C7.85989 15.9804 9.74031 14.1 12.0599 14.1C14.3795 14.1 16.2599 15.9804 16.2599 18.3V20.1C16.2599 20.7628 15.7227 21.3 15.0599 21.3C14.3972 21.3 13.8599 20.7628 13.8599 20.1V18.3C13.8599 17.3059 13.054 16.5 12.0599 16.5Z" fill="#712EFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 13.2C12.6627 13.2 13.1999 12.6628 13.1999 12C13.1999 11.3373 12.6627 10.8 11.9999 10.8C11.3372 10.8 10.7999 11.3373 10.7999 12C10.7999 12.6628 11.3372 13.2 11.9999 13.2ZM11.9999 15.6C13.9882 15.6 15.5999 13.9883 15.5999 12C15.5999 10.0118 13.9882 8.4 11.9999 8.4C10.0117 8.4 8.3999 10.0118 8.3999 12C8.3999 13.9883 10.0117 15.6 11.9999 15.6Z" fill="#712EFF"/>
</svg>
    </div>
  </transition>
</div>

CSS



body {
  align-items: center;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}
4

1 回答 1

1

你缺少一把钥匙。

在具有相同标签名称的元素之间切换时，您必须通过赋予它们唯一的键属性来告诉 Vue 它们是不同的元素。否则，Vue 的编译器为了效率只会替换元素的内容。即使在技术上没有必要，在一个组件中始终键入多个项目也被认为是一种很好的做法。

进入/离开和列出转换

例子：

<script>
export default {
  data() {
    return {
      show: false,
    }
  },
}
</script>
body {
  align-items: center;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}
<div id="icon">
    <transition name="fade" mode="out-in">
      <div v-if="show" key="one" @click="show = !show">
        svg...
      </div>
      <div v-else key="two" @click="show = !show">
        svg...
      </div>
    </transition>
  </div>

于 2021-07-08T12:48:43.473 回答