时间戳

首页 > 解决方案 > onClick 后元素上的 CSS 动画

javascript - onClick 后元素上的 CSS 动画

问题描述

我想用 onclick 为我的按钮设置动画，但它不起作用：

css 文件（style.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.cssjs 文件位于同一文件夹中。

我的函数应该修改按钮和文本元素的“className”。经过几次测试，该函数似乎被很好地调用了，并且通常动画是正常的。

有人可以帮助我吗？

标签： javascripthtmlcssjsxpreact

解决方案

className在 DOM 中不存在，它是一个 JSX 抽象，而不是class因为这是一个保留的 JavaScript 字。当您在 React 中使用虚拟 DOM（或 preact，我假设，并不完全熟悉它）时，所有文档语句（例如）getElementById也不会按预期运行。

我会在这里考虑两个选项，使用Refsor State。使用Refs，您可以跟踪 DOM 节点并直接更新它，尽管这不是一个动态或一般可取的解决方案，因为您必须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...
    )
}

推荐阅读