vue过度动画

sgj191024 / 2023-08-06 / 原文

要过度的元素需要有v-if或者v-show,用transition包裹

<transition name="sort">
                    <div class="sort" v-show="show">
                    <div class="all-sort-list2" @click="goSearch">
                        <div class="item" v-for="(c1,index) in categoryList" :key="index">
                            <h3>
                                <a  :data-categoryname="c1.categoryName" :data-category1id="c1.categoryId">{{c1.categoryName}}</a>
                            </h3>
                            <div class="item-list clearfix">
                                <div class="subitem" v-for="(c2,index2) in c1.categoryChild" :key="index2">
                                    <dl class="fore">
                                        <dt>
                                            <a  :data-categoryname="c2.categoryName" :data-category2id="c2.categoryId">{{c2.categoryName}}</a>
                                        </dt>
                                        <dd>
                                            <em v-for="(c3,index3) in c2.categoryChild" :key="index3">
                                                <a  :data-categoryname="c3.categoryName" :data-category3id="c3.categoryId">{{c3.categoryName}}</a>
                                            </em>      
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>

加个name属性

.sort-enter{
                height: 0;
            }
            .sort-enter-to{
                height: 461px;
            }
            .sort-enter-active{
                transition: all 0.5s linear;
            }