Transition - Modify Error Message When No Animation

[tomitrescak]

I am using out of the box Semantic UI and it is giving me a lot of errors in console such as:

There is no css animation matching the one you specified. Please make sure your css is vendor prefixed, and you have included transition css. slide down in.

I have latest version of semanti UI and jQuery: v1.11.2.

Any idea?

EDIT: I am using the version "semantic-css"

[jlukic]

This would occur if the CSS was not included in the page, or if the transition class names did not have an animation defined

If you are using the LESS package and don't run autoprefixer this would occur. Shouldnt happen with css package.

[lauri-elevant]

Having the same issue in the semantic.css package (no LESS involved). Basically none of the modals work properly, whole page locks up weirdly and errors like above clutter the log (all kinds of different transitions, not just the slide down)

I can confirm that when I do:

      if( true || module.can.animate() ) {
        module.set.animating(settings.animation);
      }
      else {
        module.error(error.noAnimation, settings.animation, element);
      }

I stop receiving errors (obviously..) and also now everything seems to work just fine. So there has to be something with the detection mechanism that gets a "false negative".

Mozilla/5.0 (Linux; Android 5.0.2; SAMSUNG SM-T530 Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/3.2 Chrome/38.0.2125.102 Safari/537.36"

[lauri-elevant]

How to replicate:

$('.ui.modal').modal({
    transition: 'fade'
});

$('.ui.modal.something').modal('show');

Further investigation shows that the currentAnimation will be valued none. The $clone that is used for the test looks like that (outerHTML):

<div class="ui dimmer modals page fade animating transition"></div> 

I am not sure what to take a way from this. It only happens on the Samsung tablet in the stock browser. Chrome on the same device works beautifully.

What purpose does the detection serve anyway? If it thinks that it cannot animate the modal, it breaks horribly. On the other hand, if it just tried to animate, it at least had a chance (the animations actually work fine for me).

What is the result of failing to check for animation capabilities? Is there a case when it breaks when an animation is attempted? It seems to me that the test is useless if it actually does not fail gracefully.

[orditeck]

I have the same error/problem. I'm using version 2.1.0 and LESS package with gulp-autoprefixer.

Transition: There is no css animation matching the one you specified. 
Please make sure your css is vendor prefixed, and you have included transition css. 
scale out

Edit: While writing the jsfiddle, I figured out that I was removing the modal div instead of hiding it using semantic .modal('hide') method... Using $('.modal').modal('hide').remove(); instead of $('.modal').remove(); works fine without any error. I'll leave my post there, but I don't think it will be any helpful to resolve your issue. Sorry.

Fiddle: http://jsfiddle.net/pkzyc4s1/

HTML:

<div class="ui modal"><i class="close icon"></i>
    <div class="header">Modal Title</div>
    <div class="content">
        <div class="description">A description</div>
    </div>
    <div class="actions">
        <div class="ui red cancel button">Cancel</div>
        <div class="ui green ok button">OK</div>
    </div>
</div>

JS:

$('.modal').modal({
    closable  : false,
    onDeny    : function(){
        $('.modal').remove();
    },
    onApprove : function() {
        $('.modal').remove();
    }
}).modal('show');

Gif below:

[jlukic]

The error message should probably say something like 'can't call an animation on an element no longer in the DOM' as oppose to what it says currently.

It's verifying it can proceed with animation before it does.

[Anima-t3d]

+1

[geanfelipe]

I have the same problem. I am using angularjs SPA

[jfizz]

I experienced the same thing on android 5 stock browser. Changing the following check in the transition module fixed things:

else if(currentAnimation == 'none' || !currentAnimation) {
  module.debug('No animation defined in css', animation);
  return;
}

to

else if(!currentAnimation) {
  module.debug('No animation defined in css', animation);
  return;
}

Of course, modifying the check will probably break something else, but I think that helps identify the issue. Something must be wrong with .css('animationName') in some stock android browsers.

[jlukic]

@jfizz This verifies that a css animation exists before attempting to run the animation.

If you, for example, specify a custom transition like transition: 'woo woo' and "woo woo" has no css animation specified with class woo woo the animation will fail with that error.

[lauri-elevant]

Animations are still broken for us. I find in really strange that there needs to be an effort to prevent animations from occurring if animation capabilities are not detected. IT could very well be, and in my case certainly is, a false positive. So instead of attempting a harmless animation, we break stuff...

This is the only issue we have with SUI (clearly it is awesome!) and so we could not be bothered to fork it. Instead, here is what we are using:

    gulp.src([
        dist +  '/vendor/semantic.js',
        dist +  '/vendor/semantic.min.js'
    ])
        .pipe(replace('.can.animate()', '.can.animate()||true'))
        .pipe(gulp.dest(dist +  '/vendor/'));

Works a treat!

[matchwood]

Using React. All animations seem to trigger this error in Safari 8. @lauri-elevant 's hack works for me as well, which seems just bizarre - totally agree that if there is a chance of a false positive in this context then the code should continue with a warning.

[frangeris]

Having the same issue but using vue.js, once that I click on "Cerrar sesión" I make a redirection to another page (possibly the explanation of @jlukic about the element is not longer available at DOM)

But is a redirect :|
I can't trigger the hide event manually...