yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less
View File

@@ -17,6 +17,10 @@
box-shadow: 0px 0 30px 0 rgba(0,0,0,.3); 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 // hide all infinite editors by default
// will be shown through animation // will be shown through animation
.umb-editors .umb-editor { .umb-editors .umb-editor {

2
src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor.html
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-transclude></div>
<div ng-if="model.view && !model.animating" ng-include="model.view"></div> <div ng-if="model.view && !model.animating" ng-include="model.view"></div>
<div ng-if="model.showOverlay" class="umb-editor__overlay"></div> <div ng-if="model.showOverlay" class="umb-editor__overlay"></div>