CODEWITHSUNDEEP
javascriptcssreactjs
Sofia Gallardo Henriquez
Sofia Gallardo Henriquez

Reputation: 21

Use of prop to change the css

I need help to react What happens is that I am trying to learn how to use react and I have had problems for the props, currently all I want is for my component to have an effect, that is, my component starts transparent and after a quantity of scroll This becomes solid, so I found some examples on the internet to make the change of css with a prop, but so far I have not had result, if any here knows

Menu.js


import React, {Component} from 'react';
import { Menu, Image } from 'semantic-ui-react'
import logo from '../../imagen/logobefore.png'

import '../../App.css';

const MenuScrol = ({ EfectoCSS }) => (

  <div className={EfectoCSS} >
    <Menu inverted borderless>

      <Menu.Item as="h3" name="home" header>
        <a href='/'> HOME </a>
      </Menu.Item>

      <Menu.Item as="h3" name="trade" header> TRADE</Menu.Item>

      <Menu.Item as="h3" name="logo" header>
        <a href='/'>
          <Image src={logo} size='tiny' />
        </a>
      </Menu.Item>

      <Menu.Item as="h3" name="contacto" header> CONTACTO</Menu.Item>
      <Menu.Item as="h3" name="online" header> ONLINE</Menu.Item>

    </Menu>
  </div>
);

class MenuScroll extends Component {

  constructor(props) {
    super(props);

    this.state = {
      Efecto: 'hidden'
    }

  }

    componentDidMount() {
      window.onscroll = () => this.handleAnimation();
    }

    handleAnimation = () => {
      if (document.documentElement.scrollTop > 400) {
        this.setState({ Efecto: 'MenuEfecto' });
      }
    };

    render() {
      return (
        <MenuScrol EfectoCSS={this.state.Efecto}></MenuScrol>
      )
    }
  }
  export default MenuScroll;

App.css


.hidden {
  justify-content: center;
  width: 100%;
  z-index: 100;
  position: fixed;
  display: block;
  white-space: normal;
  background-color: transparent !important;
}
.MenuEfecto{
  justify-content: center;
  width: 100%;
  z-index: 100;
  position: fixed;
  display: block;
  white-space: normal;
  background-color: transparent;
  /* margin left - margin top - margin botton */
  animation-name: MenuEfecto;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes MenuEfecto{
  0% {
    background-color: transparent ;
  } 
  100% {
    background-color: transparent !important;
  }
}

Upvotes: 1

Views: 315

Answers (1)

Diogo Peres
Diogo Peres

Reputation: 1372

Use a transition effect. Such as transition: background-color 1s ease-in-out; and change the background-color of the MenuEfecto to your choice.

.hidden {
  justify-content: center;
  width: 100%;
  z-index: 100;
  position: fixed;
  display: block;
  white-space: normal;
  background-color: transparent;
}
.MenuEfecto{
  justify-content: center;
  width: 100%;
  z-index: 100;
  position: fixed;
  display: block;
  white-space: normal;
  background-color: black;
  transition: background-color 1s ease-in-out;
}

You will also need to change the default background menu color of the semantic UI to none. Example:

.ui.inverted.menu {
  background: none;
}

Here is a working example: https://jsfiddle.net/qp4ut1e9/1/

Working Code with semantic UI: https://codesandbox.io/s/semantic-ui-example-1bhef

Upvotes: 1

Related Questions