minimac / magic Goto Github PK

@jrutheiser could you update magic style according to the new magic.css?
Thanks!

海先生，18067542312，找外快

I'm using a vanishIn via addClass and got a notice from a user which looks like as if the animation won't start/proceed:
http://i.imgur.com/fIZxmHZ.png
Chrome 27 on Chrome OS

respective url: https://www.postagon.com/signup

Never experienced that a CSS animation would just stuck right at the beginning. Any hints?
Thanks

查看您的源码，里面的所有'return'都写成了 'retourn' ！

Hey, I recently added all the animations from magic to my fork of animate.css, called animate-stylus. So, I was wondering if you'd be interested in pulling in the work that I did over there.

Here's what this hypothetical PR would do:

• Add all the animations from animate.css

• Break up the Stylus into separate files so you can either include the entire library (like you do now) or include individual animations or include individual folders of animations with globbing.

  Also, it's much easier to track changes in git when you have files broken up nicely.

• Remove the nonsemantic "name of animation" classes because they state the style (which is the job of CSS), rather than describing what the element is. Your HTML is for content, and your CSS is for style - thus, class names (a feature of HTML) should describe the content, not the style. But also add a short note in the readme that tells how to get them back.

Hi, I created a PostCSS Plugin based in your project.

https://www.npmjs.com/package/postcss-magic-animations

http://caniuse.com/#feat=css-animation
-ms- was for only IE10 beta; prefixes for this & others dropped when IE10 released.
-o- was only for desktop v12.
-moz- dropped v16.

I wish you kept up the magic.styl.

When we apply an animation, lets suppose it is "slideLeft"; it moves to a far left side. Is there a way using library that we can animate it back to its initial position?

when I tried to implement
$ npm install @minimac/[email protected]

Got following response

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@minimac%2fmagic.css - Not found
npm ERR! 404
npm ERR! 404 '@minimac/[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:

Hi there, might be a stupid question, but once my animation plays once it doesn't trigger anymore.
Checking the html I see that the class that's being added to the div never gets removed.
I'm using IONIC+VUE3

Any ideas?

Hey,

Thank's to you for the great job. It works perfectly on < img >, I tried to use the effet on a < tr >, for example to delete one with a fancy effect but nothing happens.

Is it possible or not?

Regards

Thank you very much for so beautiful effects. It would be great to have browser compatibility published in the README file since we will have to care about users with outdated ones.

Please put the file sizes (min, etc..) in the README.

I have yet to do anything with JavaScript Interop, but this would great for my black game to slide the cards in instead of just having them appear.

Bonus Question: Is there a Nuget way to install this? I only use Nuget, I uninstalled something that put NPM on my computer because I didn't like it.

Thanks

Hi, my AV software (ESET Nod32 ) yells at me when I try to go to your demo-site (https://minimamente.com/example/magic_animations/)

This web page contains potentially dangerous content.
Threat: HTML/ScrInject.B trojan

Maybe something you want to look into.
Cheers

[ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/global.scss)
[ng] Module build failed (from ./node_modules/postcss-loader/src/index.js):
[ng] Error: Failed to find 'magic.css/magic.min.css'
[ng] in [
[ng] /home/my_user/MyApP/src
[ng] ]
[ng] at resolveModule.catch.catch (/home/my_user/MyApP/node_modules/postcss-import/lib/resolve-id.js:35:13)

I'm following the tutorial of https://devdactic.com/5-animation-packages-ionic/ and I cannot use this library now, how could i use it? Thank you so much

Regards

This CSS is so handy - I have used it on several sites in conjunction with jquery.inview. Whenever a client says, "I want some sort of animation" I throw this on there and they like it.

Small question: Would you mind creating a "release" for 1.2.0 in Releases, please?

No worries and thanks you!

hi,

i used this magictime in my project, nice effects, but i have added the condition with jquery which is below but less 10 records display fine, but more than 20 records hangs the browser for 1 sec or 2 sec and then effects also not work properly.

$('.letters').click(function(e) {

    var filter = $(this).attr('id');

    if (filter == "all")
    {
      $('#filter div').each(function(){

            $(this).removeClass('magictime puffIn').hide();
        });

        $('#filter div').each(function(){

            $(this).addClass('magictime puffIn').show();
        });

      /*  $('#filter div').hide().removeClass('magictime puffIn');
        $('#filter div').addClass('magictime puffIn').show();*/

    } else {

        $('#filter .col-md-3:not(.' + filter + ')').removeClass('magictime puffIn').hide();
        $('#filter .'+filter).show().addClass('magictime puffIn');
    }
});

I noticed some animations were missing from the Bower install. When I try to update it's pulling v1.0.0 and bower info magic returns version: '1.0.0' but it seems the last commit is a version bump to v1.1.0. Has the Git tag been updated?

Hi,

i really love this project but i'm wondering if the performance could reach 60fps using First Last Invert Plays technics.

I tried to do this but the rendering is not good with FLIP technic (try in chrome or ES6 browser compliant) :

`

<html>
<head>
<link crossorigin="anonymous" href="/node_modules/magic/magic.min.css"i media="all" rel="stylesheet" />
<script crossorigin="anonymous" src="/node_modules/FLIP/dist/flip.js"></script>
<script crossorigin="anonymous" src="/node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>

open the chrome debug and compare FPS
<br />

<div id="flip" class="magictime"><img src="http://static.euronews.com/articles/351188/368x207_351188.jpg"/></div>

<br/>

<div id="std" class="magictime"><img src="http://static.euronews.com/articles/351188/368x207_351188.jpg"/></div>

<script>
let elFlip = document.querySelector('#flip');

elFlip.onclick = () => {
  let flip = new FLIP({
    element: elFlip,
    duration: 2000
  });
  flip.first();
  flip.last('puffIn');
  flip.invert();
  flip.play();

  flip.removeClass('puffIn');
};

$('#std').click(function () {
  $(this).addClass('puffIn');
});
</script>
</body>
</html>

`

Hi,
this is so cool, is there a way to integrate with AngularJs

thanks in advanced.

Hi, I was testing the file on the CDN and there was an animation that wasn't work, checking the code gotten from the CDN I realized that there is a typing error in the file on some animation names.

Where it is the word "Retourn" it would be "Return" as in the file in your repo on GitHub.

I hope you can fix it.

Greetings.

1. I think it's a typo in line 195,

should ne like this:

.perspectiveUpRetourn {
backfe-visibility: visible;
-webkit-animation-name: perspectiveUpRetourn;
-moz-animation-name: perspectiveUpRetourn;
-ms-animation-name: perspectiveUpRetourn;
-o-animation-name: perspectiveUpRetourn;
animation-name: perspectiveUpRetourn;
}

instead of

.perspectiveUpRetourn backface-visibility: visible {
-webkit-animation-name: perspectiveUpRetourn;
-moz-animation-name: perspectiveUpRetourn;
-ms-animation-name: perspectiveUpRetourn;
-o-animation-name: perspectiveUpRetourn;
animation-name: perspectiveUpRetourn;
}

2. 60% animation keyframe

Something worng with your compilation scripts as we have this:
60% {
opacity: 1;
-webkit-transform-origin: NaN%;
-moz-transform-origin: NaN%;
-ms-transform-origin: NaN%;
-o-transform-origin: NaN%;
transform-origin: NaN%;

c8cb726 didn't fix it... not sure where the demo page is, but it isn't in gh-pages

in the dist folder, magic.css is 70K but magic.min.css is 280K due to sourcemap

I add classes using javascript onclick but animation not playing?
can anyone give me a suggestion on how to check animation work or not?

I don't actually need all animations in package. I loved only two of them ;) Since I try to minimize the size of the content, delivered to an end-user, I would like to be able to easily import only animation I selected into my CSS.

magic.min.css can be then built by Grunt/Gulp from independent pieces.

thank you!

None of the examples worked on IE9 :( when I tried

Hey, maintainer(s) of miniMAC/magic!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library miniMAC/magic is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "miniMAC/magic",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hi Thanks for you lib
I'm trying to play with it quite simply

Hide Magic

The link should slide the Title out of the page , if I'm not mistaken
I included the link in the head
but nothing works ?
any idea ?

Hi, could you submit your package to bower please?

Thx!

the

    backface-visibility: hidden;

property set on the body prevent the

    position: fixed;

property to work on firefox.

I'd like to see code to add/remove the animation in the README.

Please add this:

function magicCSS(elementId, animationName, callback) {
  const node = document.getElementById(elementId);

  node.classList.add("magictime", animationName);

  function handleAnimationEnd() {
    node.classList.remove("magictime", animationName);
    node.removeEventListener("animationend", handleAnimationEnd);

    if (typeof callback === "function") callback();
  }

  node.addEventListener("animationend", handleAnimationEnd);
}

Hey, I just realized that the Stylus file is not in sync with the CSS.

Is the current magic.styl generated automatically?

Cheers, Philip

Hello, great script, thank you. This is more Q then issue: i wonder is there way to show effect with delay on every child in div which content is part of for..each with same class name. (like showing one by one effect). Regards and again great work.