Question

该项目提供了两种动画变体。

动画选项1，触发器（＆＃39; animationOption1＆＃39;）
无怨无悔地工作。

动画选项2，触发器（＆＃39; animationOption2＆＃39;）
过渡在这里不起作用。

Online check this project in StackBlitz.com

app.component.html

---------------------------------------------------------------------------
ValueError                                Traceback (most recent call last)
<ipython-input-3-48f37072f996> in <module>()
     17 data_model.fit(train_x,train_y)
     18 
---> 19 data_prediction = data_model.predict(val_x)
     20 print(mean_absolute_error(val_y, data_prediction))

/opt/conda/lib/python3.6/site-packages/sklearn/tree/tree.py in predict(self, X, check_input)
    410         """
    411         check_is_fitted(self, 'tree_')
--> 412         X = self._validate_X_predict(X, check_input)
    413         proba = self.tree_.predict(X)
    414         n_samples = X.shape[0]

/opt/conda/lib/python3.6/site-packages/sklearn/tree/tree.py in _validate_X_predict(self, X, check_input)
    371         """Validate X whenever one tries to predict, apply, predict_proba"""
    372         if check_input:
--> 373             X = check_array(X, dtype=DTYPE, accept_sparse="csr")
    374             if issparse(X) and (X.indices.dtype != np.intc or
    375                                 X.indptr.dtype != np.intc):

/opt/conda/lib/python3.6/site-packages/sklearn/utils/validation.py in check_array(array, accept_sparse, dtype, order, copy, force_all_finite, ensure_2d, allow_nd, ensure_min_samples, ensure_min_features, warn_on_dtype, estimator)
    439                     "Reshape your data either using array.reshape(-1, 1) if "
    440                     "your data has a single feature or array.reshape(1, -1) "
--> 441                     "if it contains a single sample.".format(array))
    442             array = np.atleast_2d(array)
    443             # To ensure that array flags are maintained

ValueError: Expected 2D array, got 1D array instead:

app.component.ts

<h1>Animation Option 1</h1>
<div (click)="changeDivState()"
     [@animationOption1]="clickedDivState"
>Click Me
</div>

<h1>Animation Option 2</h1>
<button (click)="toggleMenu()">Click Me</button>
<ul *ngIf="isMenuOpen"
    [@animationOption2]="isMenuOpen ? 'open': 'close'"
>
  <li>Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>Menu Item 3</li>
</ul>

谷歌搜索没有找到解决方案。

Answer 1

要实现此功能，您需要删除*ngIf="isMenuOpen"上的<ul>。 Angular无法计算closed / open个状态之间的转换，因为isMenuOpen为false时该元素根本不存在。

以下是StackBlitz，其中显示移除了*ngIf的动画。

或者，您可以将entering/leaving个州与*ngIf结合使用。它看起来像这样：

trigger('animationOption2', [      
  transition(':enter', [
    style({ backgroundColor: 'yellow' }),
    animate(300)
  ]),
  transition(':leave', [
    animate(300, style({ backgroundColor: 'yellow' }))
  ]),
  state('*', style({ backgroundColor: 'green' })),
])

这是StackBlitz的实际操作。

希望这有帮助！

角度6动画* ngIf，过渡不起作用

1 个答案: