Fix animation bug (microsoft#4964)

* Change files * comment
nasadigital · May 21, 2020 · 1fe030a · 1fe030a
1 parent 70baa5f
commit 1fe030a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/change/react-native-windows-2020-05-21-00-35-00-animation-bug.json b/change/react-native-windows-2020-05-21-00-35-00-animation-bug.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "fix for animation bug",
+  "packageName": "react-native-windows",
+  "email": "kmelmon@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-05-21T07:35:00.513Z"
+}
diff --git a/vnext/ReactUWP/Modules/Animated/PropsAnimatedNode.cpp b/vnext/ReactUWP/Modules/Animated/PropsAnimatedNode.cpp
@@ -97,9 +97,25 @@ void PropsAnimatedNode::UpdateView() {
   StartAnimations();
 }
 
+static void EnsureUIElementDirtyForRender(xaml::UIElement uiElement) {
+  auto compositeMode = uiElement.CompositeMode();
+  switch (compositeMode) {
+    case xaml::Media::ElementCompositeMode::SourceOver:
+    case xaml::Media::ElementCompositeMode::MinBlend:
+      uiElement.CompositeMode(xaml::Media::ElementCompositeMode::Inherit);
+      break;
+    default:
+      uiElement.CompositeMode(xaml::Media::ElementCompositeMode::SourceOver);
+      break;
+  }
+  uiElement.CompositeMode(compositeMode);
+}
+
 void PropsAnimatedNode::StartAnimations() {
   if (m_expressionAnimations.size()) {
     if (const auto uiElement = GetUIElement()) {
+      // Work around for https://github.com/microsoft/microsoft-ui-xaml/issues/2511
+      EnsureUIElementDirtyForRender(uiElement);
       uiElement.RotationAxis(m_rotationAxis);
       for (const auto anim : m_expressionAnimations) {
         if (anim.second.Target() == L"Translation.X") {