Question

我使用Vue JS尝试通过轻松地转换max-height属性来通过拖放来关闭读取/读取较少的内容。

此项目Bio坐在引导Vue模态中（如果相关）。

如果readMore数据为true，则将readMore类绑定到itemBio类div。然后，将max-height属性激活为100％。

尽管似乎根本不起作用。只是立即显示/关闭div。

这是我到目前为止所拥有的：

.itemBio {
   max-height: 51px;
   overflow: hidden;
   transition: max-height 5s ease;

   &.readMore {
     max-height: 100%;
     overflow: auto;
     transition: max-height 5s ease;

     &::-webkit-scrollbar {
       display: none;
     }
   }
 }

   <div class="itemBio font-14 text-grey69 w-100"
                             :class="{'readMore':readMore}"
                             style="line-height: 17px;"
                             :ref="'countLines' + menuItem.uuid">

                            {{ menuItem.description }}

                            <button @click="$refs.allergensModal.show()"
                                    class="mt-10 w-100 text-left"
                                    v-if="dietaryTrue !== 0"
                            >
                                <span class="allergen green"
                                      v-if="menuItem.dietary.vegetarian">
                                    V
                                </span>

                                <span class="allergen aqua"
                                      v-if="menuItem.dietary.vegan">
                                    VG
                                </span>

                                <span class="allergen gold"
                                      v-if="menuItem.dietary.gluten_free">
                                    GF
                                </span>

                                <span class="allergen pink"
                                      v-if="menuItem.dietary.halal">
                                    HA
                                </span>

                                <span class="allergen yellow"
                                      v-if="menuItem.dietary.soy_free">
                                    SF
                                </span>

                                <span class="allergen brown"
                                      v-if="menuItem.dietary.nut_free">
                                    NF
                                </span>

                                <span class="allergen blue"
                                      v-if="menuItem.dietary.dairy_free">
                                    DF
                                </span>
                            </button>
                        </div>

   <button class="text-teal font-black font-12" @click="showItemBio()" v-if="lines > 2">
      <span v-if="!readMore">Read More</spa`enter code here`n>
      <span v-if="readMore">Read Less</span>
   </button>


   Typescript:

      readMore: boolean = false;

      showItemBio() {
         this.readMore = !this.readMore;
      }

Answer 1

我举了一个例子。检查一次。这可能会有所帮助。（您在max-height中提到了100％，在开始max-height中提到了51px，这可能是不过渡的问题。请同时保持px或％）

--keep-seeding          don't quit when done downloading

基于类绑定的Vue JS过渡切换-上下轻松

1 个答案: