I try to make the alert boxes overlap on my content but every time it always shows and pushes down my content.
I do not have a z-index anywhere else also change position everything absolute, relative, and fixed but nothing working One time it was working then when I saved it's gone.
here is my code.
return (
<Alert
dismissible
show={this.state.show}
variant={variant}
onClose={this.handleClose}>
<div className='container'>
<Alert.Heading>{heading}</Alert.Heading>
<p className='alert-body'>{message}</p>
</div>
</Alert>
)
}
}
.alert {
align-items: center;
animation: .5s ease-in-out 0s 1 light-bounce-in;
bottom: 1rem;
display: flex;
// left: 0;
margin: auto;
max-width: 30rem;
position: absolute;
top: 30px;
left: 20px;
right: 20px;
// right: 0;
z-index: 1;
.alert-body {
margin: auto 0;
}
}
.close {
&:active,
&:focus {
outline: none;
}
}
#keyframes light-bounce-in {
0% {
opacity: 0;
transform: translateY(20%);
}
50% {
transform: translateY(-5%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
z-index: 1 seems to be a low value. Try something like z-index: 100 or z-index: 1000 or more. I'd check names of classes also.
Related
Code sandbox link: https://codesandbox.io/s/thirsty-moon-853e2k?file=/src/App.js:0-278
I want the pink circle to move in steps but it keeps moving in continuous fashion:
I tried using steps(3) steps(3,end) but none of that is working:
.Spinner {
height: 100vh;
width: 100vw;
background-color: gray;
display: flex;
align-items: center;
justify-content: center;
}
.DotLoader {
display: flex;
flex-direction: row;
column-gap: 0.5rem;
position: relative;
}
.DotLoader section {
height: 1rem;
aspect-ratio: 1;
border-radius: 50%;
background-color: #e5e4e5;
}
.DotLoader div {
position: absolute;
height: 1rem;
aspect-ratio: 1;
border-radius: 50%;
background-color: pink;
left: 3rem;
animation: moveSpinner 1s steps(3, end) infinite;
}
#keyframes moveSpinner {
0% {
left: 0;
}
50% {
left: 1.5rem;
}
100% {
left: 3rem;
}
}
<div class="Spinner">
<div class="DotLoader">
<div></div>
<section></section>
<section></section>
<section></section>
</div>
</div>
Can someone help me understand this and fix it?
.DotLoader div {
animation: moveSpinner 1s steps(3) infinite;
}
#keyframes moveSpinner {
0% {
left: 0;
}
100% {
left: 112%;
}
}
From what I understand... If you want to make the pink circle "move and stop" on each gray circles, you can simply delete steps(3, end). There is no need for it it just smoothly slides from one dot to another.
But if the request is making pink one just jump instead of slide, then you do not need another <div> for that, just create animations for your <section> elements individually. Light them up as pink and make them gray again.
I've got a simple display that flips over on click. I want to add a little bounce to the movement by rotating a few degrees in the opposite direction before rotating the full 180 degrees to reveal the opposite side.
RotateX() will accept more than one instance inline, but it calculates the end result and does not show both directions. ie:
transform: rotateX(-10deg) rotateX(190deg)
this results in the object rotating 180deg.
I've tried comma separating them, as well as just putting two sets of degress in the parens, with similar results.
I've tried putting both steps into #keyframes, but animation doesn't seem to work with my on-click event in javascript.
I've also tried having each direction of rotation in a separate class that are both activated via classlist.toggle, but still do not see both directions of rotation.
here's a codepen with the above mocked up:
https://codepen.io/Boreetos22/pen/WNrJEvR
I'd appreciate any insight. Thanks!
Transitions probably won't get what you want since you can't fake the bounce with multiple steps. #keyframes will work but you can't simply toggle the class. You need to add one and then add another to reset it.
Also, you'll need multiple animations (forward and back) that you change on over/out and click.
let sides = document.querySelector('.sides');
sides.addEventListener( 'click', function(e) {
if(sides.classList.contains('flip-forward')){
sides.classList.remove('flip-forward');
sides.classList.add('flip-backward');
}else{
sides.classList.add('flip-forward');
sides.classList.remove('flip-backward');
}
});
* {
padding: 0;
margin: 0;
}
h2 {
margin-top: 12px;
font-size: 30px;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
justify-content: center;
height: 60px;
width: 400px;
perspective: 1000px;
}
#keyframes myAnimationFwrd {
/* has bounce */
24% {
transform: rotateX( -40deg)
}
36% {
transform: rotateX( 0)
}
100% {
transform: rotateX( 190deg)
}
}
#keyframes myAnimationBkwrd {
/* no bounce add more steps to enable */
0% {
transform: rotateX( 190deg)
}
100% {
transform: rotateX( 0deg)
}
}
.flip-forward {
animation: myAnimationFwrd 1s forwards;
}
.flip-backward {
animation: myAnimationBkwrd 1s forwards;
}
.sides {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
position: relative;
transform-style: preserve-3d;
cursor: pointer;
}
.red, .black {
text-align: center;
color: white;
height: 100%;
width: 100%;
border-radius: 30px;
box-shadow: 2px 2px 4px black;
position: absolute;
backface-visibility: hidden;
}
.red {
background-color: darkred;
z-index: 2;
}
.black {
background-color: black;
z-index: 1;
transform: rotateX(180deg);
}
<div class="container">
<div class="sides">
<div class="red">
<h2>PLAYER ONE'S TURN</h2>
</div>
<div class="black">
<h2>PLAYER TWO'S TURN</h2>
</div>
</div>
</div>
I am trying to make animation for the side menu. If I open the menu animation is working exactly how I want, the issue is, that I cannot make animation when I close it. Is there some property to make it animate back after the menu closes? Best would be if I could do it with css animations.
app.component.html
<app-menu *ngIf="showMenu"></app-menu>
Animation triggers when I toggle showMenu variable but it just disappear after I set it false.
menu.component.html
<div class="menu-panel" (click)="$event.stopPropagation();">
styles.scss
app-menu {
display: inline-block;
z-index: 100;
position: absolute;
height: 100vh;
width: 100vw;
}
#keyframes menu-panel {
0% {
background-color: #00FF9B;
left: -$menu-width;
}
100% {
background-color: #B290FF;
left: 0;
}
}
.menu-panel {
position: absolute;
display: inline-block;
width: $menu-width;
height: 100%;
background-color: #B290FF;
animation: menu-panel 500ms linear;
z-index: 100;
}
Try using transition instead. Control whether the panel is opened by a class .open. That's just the idea, try tweaking yourself to fits your need.
app-menu {
display: inline-block;
z-index: 100;
position: absolute;
height: 100vh;
width: 100vw;
}
.menu-panel {
position: absolute;
display: inline-block;
width: $menu-width;
height: 100%;
z-index: 100;
transition: all 500ms;
background-color: #00FF9B;
left: -$menu-width;
}
.menu-panel.open {
background-color: #B290FF;
left: 0;
}
I'm trying not to have my text block break a word in parts and jump to next line. For every device size the text keeps breaking off and creates an issue for readability. I tried to use marring-right with %'s but doesn't really help much.
Here is my pug code:
div(class="container")
div(class="row u-full-height")
div(class="intro col-xs-12 col-sm-10 col-md-10 col-lg-10")
p(id="js-intro-content-identifier" class="intro__content-identifier")
| Home
h1(id="js-intro-heading" class="intro__heading")
| It is a long established fact that a
| reader will be distracted by the
| readable content of a page.
p(id="js-intro-description" class="intro__description type--color-green")
| 20+ years of experience
div(class="intro__scroll")
a(href="" class="scroll type--captialize") scroll
span(class="scroll-indicator")
Here is my scss:
.intro {
align-self: center;
#media screen and (orientation: landscape) and (max-width: 815px) {
margin-top: 4rem;
}
&__heading, &__description{
// opacity: 0;
}
&__heading {
font-size: 2.125rem;
line-height: 1.25;
// font-family: $type-font--cormorant-garamond;
font-weight: 500;
// letter-spacing: 0.05rem;
// margin-right: 10%;
#media screen and (min-width: 1000px)
{
font-size: 46px;
}
}
&__description, &__content-identifier {
// #include text(.8rem, 0, 0);
color: grey;
margin-bottom: 0.4rem;
text-transform: uppercase;
letter-spacing: 0.2rem;
// #include for-tablet-portrait-up{
// font-size: 1.4rem;
// }
// #include for-tablet-landscape-up{
// font-size: 1.2rem;
// }
}
&__scroll{
display: block;
// display: none;
// #include for-tablet-portrait-up{
// display: block;
// }
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10%;
.scroll{
color: white;
font-size: .8rem;
}
.scroll-indicator{
height: 70px;
width: 1px;
// background-color: #333;
display: block;
position: relative;
left: 53%;
transform: translateX(-50%);
top: 20px;
// overflow: hidden;
&:after{
content: '';
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: linear-gradient(transparent, green, transparent);
animation: scrollindicator 3s ease-out infinite;
}
}
}
}
#keyframes scrollindicator{
0%{
transform-origin: top;
transform: scaleY(0);
}
50%{
transform-origin: top;
transform: scaleY(1);
}
51%{
transform-origin: bottom;
transform: scaleY(1);
}
100%{
transform-origin: bottom;
transform: scaleY(0);
}
}
Here is also a codepen link: https://codepen.io/harp30/pen/oyRLOe?editors=0110
Thank you for your time and guidance.
This is not a CSS/SASS issue—it is instead related to how you define the config/options for the SplitText plugin. You are using type: "chars" for the config, which tells SplitText to split by character, not by word. This means that there is a possibility, at certain widths, that your string will be split within a word instead of between words. To circumvent this, simply change it to type: "words" and the problem will be solved.
Instead of this:
introSplitText_CI = new SplitText(jsLandingContentIdentifier, {
type: "char"
}),
introSplitText_Heading = new SplitText(jsLandingHeading, {
type: "char"
}),
…you should be using this:
introSplitText_CI = new SplitText(jsLandingContentIdentifier, {
type: "words"
}),
introSplitText_Heading = new SplitText(jsLandingHeading, {
type: "words"
}),
I want a transition on a wordpress menu item.
I plan to insert an icon before on hover...
Now I test this with a word and this works fine...
.academy .avia-menu-text:hover::before {
content:'Jetzt ';
transition:all 3s;
-webkit-transition:all 3s;
}
But the transition is not working. I need it with a smooth fade in. testfile
If I´m understanding your question correctly you want an annimated text before your element.
You can add this element without the hover state:
.academy .avia-menu-text:before {
width: 0;
transition: 3s;
content: 'your text';
}
.academy .avia-menu-text:hover:before {
width: 100%;
}
Here is a small example I made in a container
p:before{ content: 'hello world'; width: 0; display: block; overflow: hidden; transition: .3s; position: absolute; left: -100px; top: 0; white-space: nowrap;}
p:hover:before{ width: 100%; }
div{ width: 300px; height: 100px; }
p{ position: relative; left: 100px; }
<div>
<p>Text here</p>
</div>