Fit over extents

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css">
<script src="http://openlayers.org/en/v3.2.1/build/ol.js"></script>
<body>
  <div id="map" class="map"></div>
  <button id="fit-extent-animated">Fit extent</button>
</body>

CSS

.map {
  height: 400px;
  width: 100%;
}

JavaScript

var map = new ol.Map({
   target: 'map',
   loadTilesWhileAnimating: true,
   layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
   view: new ol.View({
      center: ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
      zoom: 1
   })
});

var fitExtentAnimated = document.getElementById('fit-extent-animated');
fitExtentAnimated.addEventListener('click', function() {

  let view = map.getView();
  let extent = view.calculateExtent(map.getSize())
  
	view.fitExtent(extent, map.getSize());
}, false);