add will-change css property to prepare browser for the animations

This commit is contained in:
Mads Rasmussen
2018-05-03 20:04:34 +02:00
parent 101d92ca2d
commit a5bbf3d832
2 changed files with 5 additions and 1 deletions

View File

@@ -17,6 +17,10 @@
box-shadow: 0px 0 30px 0 rgba(0,0,0,.3);
}
.umb-editor--animating {
will-change: transform, opacity, width, left;
}
// hide all infinite editors by default
// will be shown through animation
.umb-editors .umb-editor {

View File

@@ -1,4 +1,4 @@
<div class="umb-editor" ng-style="model.style" ng-class="{'umb-editor--small': model.size === 'small'}">
<div class="umb-editor" ng-style="model.style" ng-class="{'umb-editor--small': model.size === 'small', 'umb-editor--animating': model.animating}">
<div ng-if="!model.view && !model.animating" ng-transclude></div>
<div ng-if="model.view && !model.animating" ng-include="model.view"></div>
<div ng-if="model.showOverlay" class="umb-editor__overlay"></div>