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.

[Shape] Animations don't work when you click a button

See original GitHub issue

The issue

Take a look at this JSFiddle. Somehow the animation doesn’t work as expected. It starts and after a few milliseconds it skips to the end of the animation.

The HTML of my shape …

<div class="ui shape">
  <div class="sides">
    <div class="active side">
      <div class="ui card">
        <div class="content">
          <div class="description">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est 
          </div>
        </div>

        <div class="ui bottom attached flip button">
          <i class="retweet icon"></i>
          Flip card!
        </div>
      </div>
    </div>

    <div class="side">
      <div class="ui card">
        <div class="content">
          <div class="description">
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
          </div>
        </div>

        <div class="ui bottom attache---d flip button">
          <i class="retweet icon"></i>
          Flip card!
        </div>
      </div>
    </div>
  </div>

The javascript to call the animation …

$('.shape').find('.flip.button').on('click', function () {
  $(this).closest('.shape').shape('flip over');
});

The issue exists in … Chromium v53.0 Firefox v50.0 (on Ubuntu 16.04)

Is this a bug or is it my fault? 😕

Issue Analytics

State:
Created 7 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

awgvcommented, Feb 11, 2017

Hi @brainscript, I think it happens only if you attach an on click event to a button that’s inside a shape. Labeling as enhancement.

0reactions

lubber-decommented, Oct 6, 2022

Implemented the suggested fix for Fomantic-UI in https://github.com/fomantic/Fomantic-UI/pull/465 See https://jsfiddle.net/b8gpmjtx/

Top Results From Across the Web

Can't add animation to textbox or shape in PPT 2010

Can't add animation to textbox or shape in PPT 2010 · Click on the Start Button, then on Control Panel. · Select Programs,...

How to Animate Impossible Shapes in After Effects

So I'm just going to click on them once or does that work? No, it doesn't. That's an illustrator. And after effects, you...

How to create buttons with Adobe Animate

Make sure that Enable Buttons from the Control menu is deselected. Double-click the button to open the Instance Properties dialog box. Note: In ......

Animating Views and Transitions — SwiftUI Tutorials

The graph switches between three different sets of data when you click the buttons below the bars. In this section, you'll use a...

Animation not working right - InVision Support

What I am doing is: 1st: Click on a button (that is build with shapes, to be after transformed to a cross) and...