Question: I installed the Vue-CLI in version 3.7. Run `vue create my-project` and `npm run serve`. Everything was fine and got message 

```
App running at:
  - Local:   http://localhost:8080/

```

Though on the `http://localhost:8080/` I got `This site can’t be reached`.

I managed to use `vue init webpack-simple my-project` and then in `./node_modules/webpack-dev-server/bin/webpack-dev-server.js` change port number and with the new one it's working but this "trick" doesn't work for `vue create` anyway.

Node version 11.11 and OSX Mojave. There should not be anything that could block the port. I have no idea what to do with this.

Answer: 
This is a bit of a workaround, but it will at least make a similar looking animation in IE/Edge. It's similar, but not identical, and it doesn't have any overflow issues. 

it turns out that this is an Angular issue. it attempts to translate the animation code to CSS `@keyframes` for browser that do not support `WebAnimations` and the `overflow-y` property doesn't seem to translate properly.

Since we know what isn't supported, we can detect support for the API and switch out which animation to use based on that. The line `'animate' in document.documentElement` will tell us if `WebAnimations` are supported or not.

Here's the full code:

```js
import { trigger, transition, style, animate, state, AnimationMetadata } from '@angular/animations';
import { defaultDuration, defaultEasing } from './animation-variables';

//Angular does not properly translate a WebAnimation with `overflow-y` into a CSS Animation, this it overflows it's container.
//So we use an entirely different animation for these browsers.  It will still overflow, but the added opacity transition makes it less obvious

const animForWebAnimations: AnimationMetadata[] = [
    state('*', style({
        height: '*',
    })),
    state('void', style({
        height: '0',
        'overflow-y': 'hidden',
    })),
    //Same transition duration/easing when entering or leaving
    transition('* => *', animate(`${defaultDuration}ms ${defaultEasing}`))
];

const animForCssAnimations: AnimationMetadata[] = [
    state('*', style({
        height: '*',
        'transform-origin': 'center 0',
        transform: 'scaleY(1)'
    })),
    state('void', style({
        height: '0px',
        'transform-origin': 'center 0',
        transform: 'scaleY(0)'
    })),
    transition('* => *', animate(`${defaultDuration}ms ${defaultEasing}`))
];

const expandCollapseAnimationMetadata = 'animate' in document.documentElement ? animForWebAnimations : animForCssAnimations;
export const expandCollapseAnimation = trigger('expandCollapse', expandCollapseAnimationMetadata);

```

For Chrome/Firefox and other "good" browsers the animation looks the same as above in my question, but now it looks like this in IE/Edge

![](https://i.stack.imgur.com/0A8bJ.gif)
I've been facing the same problem and i found a pretty sweet way to solve it. Angular is applying a class when it's running the angular animation. So you can add your overflow hidden to that class as in this simple example: 

```css
.acrodion-content.ng-animating {
  oveflow:hidden;
}
```

```html
<div class="accordion-item">
  <div class="accordion-item-header">One</div>
  <div class="accordion-content" [@expandCollapse] *ngIf="expanded">
    lorem ipsum dolor sit amet.
  </div>
</div>
```