Question

我为以前的角度应用程序创建了“平滑高度”指令，该指令按预期工作。这个想法是从先前的内容中获取高度，并以该高度开始新的内容，然后通过过渡将其设置为原始高度。

我现在在一个普通的网站上工作，并且希望使用我之前为路由转换创建的相同指令，但是由于某种原因，它的行为不符合我的预期。初始动画将按预期工作，但下一个动画似乎将先前的高度与新的高度相加，然后从该高度开始。这会导致下面的div反弹，并且不再平滑过渡。奇怪的是，当我向第1页到第2页的导航发送垃圾邮件时，高度会按应设置的动画设置，但不会从X-> X或Y-> Y过渡。

我试图存储先前的高度，然后从先前和当前路线中减去增加的高度。但是我无法使其正常工作。

我在stackblitz上创建了一个快速的示例来说明问题：https://stackblitz.com/edit/angular-md1j8k?embed=1&file=src/app/app.component.html

这是指令

getCleverData(url, token) {

    let reqHeader = new HttpHeaders({
        'Authorization': 'Bearer ' + token
    })

    return this.http.get(API_PREFIX + url, { headers: reqHeader })
        .pipe(
            map((data: any) => {
                console.log(data);

                if (data) return data;
            }),
            catchError(this.handleError)
        );
}

/** PUT: update a data to the server */
updateData (url, data?) {

    let httpParams = new HttpParams();
    Object.keys(data).forEach(function (key) {
         httpParams = httpParams.append(key, data[key]);
    });

    return this.http.post(this.apiUrl + url, httpParams, httpOptions)
    .pipe(
        map((data: any) => {
            if (data.status == 0) {
                this.presentToast(data.message);
            }

            if (data) return data;
        }),
        catchError(this.handleError)
    );
}

这就是我的使用方式

<div *ngFor="let menu of MenuList"> 
     <span>{{bindMenuNames(menu.FullNameSpace)}}</span> 
  </div>

 bindMenuNames(FullNameSpace): string 
  {
        console.log(FullNameSpace);
        let menuname: string;
        switch (FullNameSpace)
        {
            case "Message_Centrel":
                menuname = "Messaging";
                break;

            case "Admin":
                menuname = "Admin"
                break;
            case "Catalog":
                menuname = "Course Authoring"
                break;
           default:
                menuname = ""
                break;
        }
       return menuname;
    }

感谢您的帮助！而且我是角度动画和整体动画的初学者，所以如果我错过了一些基本知识，我们感到很抱歉。

Angular 7 Smooth Height RoutingTrainsition指令，高度添加错误

0 个答案: