CSS анимация на элементе после onClick - PullRequest
Новая
       61

CSS анимация на элементе после onClick

1 голос
/ 18 марта 2020

Я хочу анимировать мою кнопку с помощью onclick, но она не работает:

Файл css (стиль. css): 

.slide-out-top {
    -webkit-animation: slide-out-top 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: slide-out-top 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
}
@keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
}
.slide-out-bottom {
    -webkit-animation: slide-out-bottom 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: slide-out-bottom 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
}
@-webkit-keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
}
@keyframes slide-out-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
}

файл jsx (preact) : 

import { h, Component } from 'preact';
import "../../style/index.css";
import "../../style/bootstrap.min.css";
import "./style.css";

export default class Home extends Component {

    buttonExit = () => {
        document.getElementById('buttonToExit').className = 'btn btn-outline-light slide-out-bottom';
        document.getElementById('textToExit').className = 'pt-5 pb-3 font-weight-bold text-light h1 slide-out-top';
    }

    render = () => {
        return (
            <div className="App vh-100">
                <div className="h-70 container">
                    <div className="py-5"> </div>
                    <div className="py-5" style={{ width: "100%" }}>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm"> </div>
                                <div class="col text-center">
                                    <div id="textToExit" className="pt-5 pb-3 font-weight-bold text-light h1">Accès en ligne</div>
                                    <button type="button" id="buttonToExit" onClick={this.buttonExit} className="btn btn-outline-light">Se Connecter</button>
                                </div>
                                <div class="col-sm"> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

style.css находится в той же папке, что и файл js.

Моя функция должна изменять "имя_класса" кнопки и текстового элемента. После нескольких тестов, функция, кажется, хорошо называется и, как правило, анимации работают.

Кто-нибудь может мне помочь, пожалуйста?

1 Ответ

1 голос
/ 18 марта 2020

className не существует в DOM, это абстракция JSX, используемая вместо class, поскольку это зарезервированное слово JavaScript. Поскольку вы работаете с виртуальным DOM в React (или, я полагаю, не совсем знакомым с preact), все операторы документа, такие как getElementById, также не будут работать должным образом.

Я бы посоветовал два варианта здесь, используя Refs или State. С Refs вы можете отслеживать DOM-узел и обновлять его напрямую, хотя это не является динамическим c или вообще рекомендуемым решением, так как вы должны заранее объявить все свои Refs. Но эй, это работает. 

textRef = createRef();
buttonRef = createRef();

buttonExit = () => {
    textRef.current.classList.add('slide-out-top');
    buttonRef.current.classList.add('slide-out-bottom');
}

render = () => {
    return (
        ...your code...
        <div id="textToExit" ref={this.textRef}...>
        <button type="button" id="buttonToExit" ref={this.buttonRef}...>
        ...your code...
    )
}

С State вы можете выборочно активировать различные части списка классов в зависимости от текущего состояния компонента. 

state = {
    exit: false
}

buttonExit = () => {
    this.setState({exit: true});
}

render = () => {
    const buttonExit = this.state.exit ? 'slide-out-bottom' : '';
    const textExit = this.state.exit ? 'slide-out-top' : '';

    return (
        ...your code...
        <div id="textToExit" className={`pt-5 pb-3 font-weight-bold text-light h1 ${textExit}`}...>
        <button type="button" id="buttonToExit" className={`btn btn-outline-light ${buttonExit}`}...>
        ...your code...
    )
}
...