Angular 7中的页面动画可能会导致页面重新加载，这是因为在Angular的动画过程中，会对元素进行添加、删除和隐藏等操作，这可能导致页面的重新渲染。

以下是解决该问题的几种方法：

1. 使用Angular的preserveWhitespaces选项，将其设置为true，可以避免页面重新加载。在项目的tsconfig.json文件中添加以下代码：

"angularCompilerOptions": {
  "preserveWhitespaces": true
}

2. 使用@angular/platform-browser/animations模块中的NoopAnimationsModule，它提供了一个空的动画模块，可以避免页面重新加载。

首先，在项目的根模块中导入NoopAnimationsModule：

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    NoopAnimationsModule,
    // 其他模块导入
  ],
  // ...
})
export class AppModule { }

然后，在需要使用动画的组件中，将BrowserAnimationsModule替换为NoopAnimationsModule：

import { Component } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  // ...
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('500ms', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class MyComponent { }

这样，页面动画将不再导致页面重新加载。

3. 如果以上方法都无效，可以尝试使用ngIf指令来控制元素的可见性，而不是使用动画。这样可以避免元素的添加、删除和隐藏等操作，从而避免页面重新加载。

动画内容

import { Component } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  // ...
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('500ms', style({ opacity: 0 }))
      ])
    ])
  ]
})
export class MyComponent {
  isVisible = true;
}

以上是几种解决Angular 7页面动画导致页面重新加载的方法，您可以根据具体情况选择适合的方法。