UPDATE: I've created a JSFiddle: http://jsfiddle.net/U3pVM/18137/
I'm looking to make the black section move up FIRST, followed by the green sliding across. I'm struggling to achieve this effect. Keep reading for more details:
Note: The code is written in Typescript (re: () => {} )
The situation involves a webpage with an overlaying div and a few divs in the background. It indicates the type of animation through a CSS class.
https://i.sstatic.net/BOFBd.png
Below is the code snippet referenced in the diagram:
$scope.Resizing = true; // This stops animations (linked to a css class)
$scope.MoveToPage( col, row );
$scope.$applyAsync(() => {
$scope.FirstPageTop = -$scope.PageMap.WindowInfo.Height;
$scope.Resizing = false; // Enable animations
});
The behavior I'm aiming for is:
- When Resizing is true, it removes the animation class.
- Then it executes the MoveToPage method, adjusting the position without animation due to the Resizing attribute.
This is reflected in my HTML:
<div class="column-wrap"
ng-class="{ 'column-wrap-animation' : !Resizing }"
ng-style="{ 'width': PageMap.ContainerWidth + 'px',
'left': PageMap.ColumnWrap.Left + 'px'}">
This process updates the scope asynchronously (to avoid errors) and removes the overlay after positioning the underlying content. The issue is that the overlay slides off before the content underneath reaches its destination. How can I address this CSS animation conflict?
Alternatively, why isn't the class being removed when Resizing is set to false and the scope is updated as indicated?
Providing more context: