vue-sell-details动画

先记录一下我的出现的问题

1. <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
   使用webstrom编写，提示
   Elements in iteration expect to have ‘v-bind:key’ directives（vue/require-v-for-key）
   Vue 2.2.0+的版本里，当在组件中使用v-for时，key是必须的。
   如果我们并不需要这个key，而且key值不要用对象或是数组作为key，用string或number作为key时，我们可以忽略这行的eslint检查。
2. 我们的details整个部分需要实现一个淡入淡出的效果。

• 1.0 transition作为一个属性可以取值。

<div v-show="show" class="detail" transition="fade">
    .detail
      transition all 0.5s
      &.fade-transition
        opacity 1
        background rgba(7,17,27,0.8)
      &.fade-enter,&.fade-leave
        opacity 0
        background rgba(7,17,27,0)

• 2.0版本 transition作为一个标签包裹要实现的元素。

    <transition name="fade">
      <div v-show="show" class="detail">
    </transition>
.detail
      opacity 1
      background rgba(7,17,27,0.8) //渐变结束后的最终效果
      &.fade-enter-active, &.fade-leave-active //渐变的进入和退出都历时0.5s
        transition all 0.5s
      &.fade-enter, &.fade-leave-to //定义进入前和退出后样式，即透明无色背景。
        opacity 0
        background rgba(7,17,27,0)

还要记录一下背景颜色的模糊和背景图片的模糊是不同的
背景颜色的模糊：
backdrop-filter: blur(10px)