Spiderpig86/Cirrus

Can't get animations working

bottlehall opened this issue · 2 comments

bottlehall commented

I don't think this issue is related to #172 because the example animations work fine on my Mac in both Chrome and Safari.

The problem comes when I try to use animations in my own page. I want to use the ping animation. Copying and pasting the example code doesn't show anything to do with the animation. I can't see any difference between the demonstration and example (except that the notification images' order is swapped and that doesn't make a difference). I have tried recreating the hierarchy of navigation divs, sections, etc., but this does not make any difference.

<span class="notification u-inline-flex u-absolute u-top-0 u-right-0">
    <span class="h-100p w-100p u-absolute u-inline-flex animated ping bg-blue-400 u-round-full"></span>
    <span class="h-100p w-100p u-inline-flex bg-blue-400 u-round-full"></span>
</span>

If I remove the outer span, then I get large versions of the images at the bottom, with one animating. It seems to be something to do with the size/placement. In the demonstration, the notification element is 12px x 12px but there isn't anything visible in my version and inspect element suggests the circles are 0px x 0px.

This doesn't work:

<!DOCTYPE html>
<html id="page">
<head>
  <title>Animation</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge;"/>
  <link href="/Cirrus/dist/cirrus.min.css" type="text/css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"/>
</head>
<body class="">
<div class="default-layout tree-nav-body mx-auto mb-0">
    <div class="tree-nav-header u-items-center">
        <div class="tree-nav-container h-auto" style="flex-grow: 1;">
            <main class="page-layout">
                <div class="content">
                    <section class="padtop">
                        <section class="pt-4" id="ping">
                            <h6><a class="tooltip tooltip--left mr-1" data-tooltip="Copy" style="cursor: pointer;">#</a>Ping</h6>
                            <p>Add the <code>pulse</code> animation to simulate pulsing in an out by oscillating the element's opacity. This is a great animation for skeleton loaders as seen below.</p>
                            <div class="u-relative u-inline-flex">
                                <div class="u-round-xs u-shadow-lg p-3 bg-blue-100">
                                    <div class="u-flex u-items-center u-gap-2">
                                        <div>
                                            <div class="avatar"><img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=128">
                                            </div>
                                        </div>
                                        <div><b>3 new unopened messages in the last hour.</b>
                                            <div class="text-gray-600">@johndoe sent "About your PR, it's mostly good but..."</div>
                                        </div>
                                    </div>
                                </div>
                                <span class="notification u-inline-flex u-absolute u-top-0 u-right-0">
                                    <span class="h-100p w-100p u-absolute u-inline-flex animated pulse bg-blue-400 u-round-full"></span>
                                    <span class="h-100p w-100p u-inline-flex bg-blue-400 u-round-full"></span>
                                </span>
                            </div>
                            <div class="space"></div>
                        </section>
                    </section>
                </div>
            </main>
        </div>
    </div>
</div>
</body>
</html>

Any suggestions as to what I am doing wrong?

Spiderpig86 commented

Hi,

In the example, the .notification class was used to show to blue dot in the example. It isn't meant to be a style we ship by default. You can replicate the style by copying the following class from the docs:

.notification {
    margin-top: -.25rem;
    margin-right: -.25rem;
    height: .75rem;
    width: .75rem;
}

Or you can have the inline version like this:

<div class="u-center h-100p">
  <div class="u-relative u-inline-flex">
  <div class="u-round-xs u-shadow-lg p-3 bg-blue-100">
    <div class="u-flex u-items-center u-gap-2">
      <div>
        <div class="avatar"><img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=128"></div>
      </div>
      <div><b>3 new unopened messages in the last hour.</b>
        <div class="text-gray-600">@johndoe sent "About your PR, it's mostly good but..."</div>
      </div>
    </div>
  </div>
  <span class="w-2 h-2 u-inline-flex u-absolute" style="top: -.25rem; right: -.25rem"><span class="w-100p h-100p u-absolute u-inline-flex animated ping bg-blue-400 u-round-full"></span><span class="h-100p w-100p u-inline-flex bg-blue-400 u-round-full"></span></span>
</div>
</div>

I will update the documentation to make it clearer that the notification class is not something that we include, just the pulsing animation styles.

Spiderpig86 commented

Resolving