如何使用纯css制作反弹动画效果

编程问答 2022-05-10

问题描述

下面的代码工作正常，问题是我不想使用整个包，因为我只需要几个类， 所以我检查了 source code 并复制了我页面上的类范围，但它没有按预期工作..

import 'react-toastify/dist/ReactToastify.css'
import 'animate.css/animate.min.css'

const bounce = cssTransition({
  enter: 'animate__animated animate__bounceIn',//this should be source code
  exit: 'animate__animated animate__bounceOut',})
const App = () => {
  return (
    <>
        <ToastContainer
          position="top-center"
          autoClose={4000}
          transition={bounce}
          hideProgressBar
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnHover
        />

在下面尝试了 css 但没有用（从源代码复制 .animate__animated 类）；

    const bounce = cssTransition({
      enter: '-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(--animate-duration);animation-duration:var(--animate-duration);-webkit-animation-fill-mode:both;animation-fill-mode:both',exit: 'animate__animated animate__bounceOut',})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-toastifyreactjsreactjssass