动画开始时，动画路线过渡的宽度不正确

Question

这是我第一次尝试使用角度7进行溃败过渡动画，而我正在使用角度7

我有一个路由器插座，尝试使装入的组件在离开时向下移动，在进入时从顶部移动。我主要使用此动画，方向也有效。这是我的动画：

Block : 
class GetProduct extends \Magento\Catalog\Block\Product\View{

    public function getProductFromCatalog()
    {
        return $this->getProduct();
    }
}

.phtml:
  $product = $block->getProductFromCatalog();

    echo "<pre>";
    print_r($product->getData());
    echo "</pre>";
    die();

组件从顶部移入，并适当地离开底部。但是，在用户单击按钮的那一刻，路由器出口中的组件会立即将其宽度增加很多，并且动画会以该较宽的宽度继续该组件。

这是动画开始的紧接着开始状态的屏幕快照。它是显示宽度变化的gif：

就好像它失去了定位并失去了对其包含div的引用。

有人可以帮我弄清楚这里发生了什么以及如何在整个动画过程中保持组件宽度相同吗？

谢谢