Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation regression

See original GitHub issue

The following animation jumps to full width briefly as the animation starts. This is with current nightly builds. It is as if there is a brief period when neither style is applied

<Grid>
    <Grid.Styles>
      <Style Selector="ToggleButton[IsChecked=true]">
        <Style.Animations>
          <Animation Duration="0:0:2.15"
                     FillMode="Forward"
                     Easing="SineEaseInOut">
            <KeyFrame Cue="0%">
              <Setter Property="Width" Value="150"/>
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="Width" Value="300"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
      <Style Selector="ToggleButton[IsChecked=false]">
        <Style.Animations>
          <Animation Duration="0:0:2.15"
                     FillMode="Forward"
                     Easing="SineEaseInOut">
            <KeyFrame Cue="0%">
              <Setter Property="Width" Value="300"/>
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="Width" Value="150"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
    </Grid.Styles>
    <ToggleButton Height="30" VerticalAlignment="Top" >
      <TextBlock>Click Me</TextBlock>
    </ToggleButton>
  </Grid>

Issue Analytics

State:
Created 4 years ago
Comments:19 (19 by maintainers)

Top GitHub Comments

1reaction

ahoppercommented, Jan 24, 2020

this does work though

<Grid>
    <Grid.Styles>
      
      <Style Selector="ToggleButton[IsChecked=true]">
        <Style.Animations>
          <Animation Duration="0:0:2.15"
                     FillMode="Both"
                     Easing="SineEaseInOut">
            <KeyFrame Cue="0%">
              <Setter Property="TranslateTransform.X" Value="200"/>
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="TranslateTransform.X" Value="0"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
      <Style Selector="ToggleButton[IsChecked=false]">
        <Style.Animations>
          <Animation Duration="0:0:2.15"
                     FillMode="Both"
                     Easing="SineEaseInOut">
            <KeyFrame Cue="0%">
              <Setter Property="TranslateTransform.X" Value="0"/>
            </KeyFrame>
            <KeyFrame Cue="100%">
              <Setter Property="TranslateTransform.X" Value="200"/>
            </KeyFrame>
          </Animation>
        </Style.Animations>
      </Style>
    </Grid.Styles>
    <ToggleButton Height="30" VerticalAlignment="Top" Width="150" HorizontalAlignment="Left" >
      <TextBlock>Click Me</TextBlock>
    </ToggleButton>
    
  </Grid>

0reactions

ahoppercommented, Jan 6, 2023

this still seems to be an issue, repro upgraded for 11.0 previews clicking the button sometimes makes it jump

<Grid>
<Grid.Styles>

	<Style Selector="ToggleButton[IsChecked=true]">
		<Style.Animations>
			<Animation Duration="0:0:2.15"
								FillMode="Forward"
								Easing="SineEaseInOut">

				<KeyFrame Cue="100%">
					<Setter Property="TranslateTransform.X" Value="0"/>
				</KeyFrame>
			</Animation>
		</Style.Animations>
	</Style>
	<Style Selector="ToggleButton[IsChecked=false]">
		<Style.Animations>
			<Animation Duration="0:0:2.15"
								FillMode="Forward"
								Easing="SineEaseInOut">

				<KeyFrame Cue="100%">
					<Setter Property="TranslateTransform.X" Value="200"/>
				</KeyFrame>
			</Animation>
		</Style.Animations>
	</Style>
</Grid.Styles>
<ToggleButton Height="30" VerticalAlignment="Top" Width="150" HorizontalAlignment="Left" >
	<ToggleButton.RenderTransform>
		<TransformGroup>
			<TranslateTransform />
		</TransformGroup>
	</ToggleButton.RenderTransform>
	<TextBlock>Click Me</TextBlock>
</ToggleButton>

</Grid>
			```

Top Results From Across the Web

Visualizing Optimization in Linear Regression and Logistic ...

In this post, I will show a few animations that visualize “learning in action”. Hopefully, they can convey the “feel” of some foundational...

Animations of Multiple Linear Regression with Python

This is the follow-up article to “Gradient Descent Animation: 1. Simple linear… ... Animated regression plane and contour plot (large) ...

Interactive Visualization of Linear Regression / Yi Zhe

Powering the world's best data teams. Use Observable to explore your data, create visualizations, and share insights faster. Try it for free.

Causal Inference Animated Plots

Animation showing the capture of the by-group means before treatment, and after treatment. Regression Discontinuity. There's a policy treatment called Treatment ...

matplotlib-linear-regression-animation.ipynb

This is a notebook for the medium article Matplotlib Linear Regression Animation in Jupyter Notebook. Please check out article for instructions.