ReactJS 在悬停时显示元素

Question

实现持久效果的最佳方法是什么like in this gif？我认为 framer-motion whileHover 属性是我最好的机会，但我误解了它是如何工作的，我认为它可以像 CSS 动画中那样输入和输入参数。

我想在光标悬停在其上或达到特定视口高度时显示 'footer'。

gif 中的内容是使用 css 中的关键帧动画制作的。

如果有任何提示、指导、link 视频关于如何构建此类内容，我将不胜感激。

提前致谢

Answer 1

我相信您仅使用 CSS 就可以达到同样的效果。这通常是可取的，因为 javascript 会使您的代码膨胀并且执行速度变慢。

您可以在 this fiddle

中看到实现此效果的方法

基本上，您可以使用“悬停”伪类进行美学上的更改，然后使用“过渡”属性对其进行动画处理。

在上面的 fiddle 中，这是真正起作用的代码：

/* setting base styles for the footer element */
footer {
  margin: 0 auto;
  width: 200px;
  transform: translateY(60px);
  transition: width 1s, transform 1s;
}

/* having an inner child will give that "truncated border radius" effect you see in the gif */
footer .inner {
  background-color: lightblue;
  padding: 3em;
  border-radius: 50%;
  transition: border-radius 1s;
}

/* Make changes using the "hover" pseudoclass */

footer:hover {
  transform: translateY(0px);
  width: 100%;
}

footer:hover .inner {
  border-radius: 0%;
}

请注意，我发布的 fiddle 只是关于如何构建此组件的提示，但它仍然缺少一些功能，例如页脚文本内容本身的处理（现在它不会'如果它是多行的，则效果不佳）和可访问性。

Answer 2

仅使用 css 查看此解决方案：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: Segoe UI, sans-serif;
}
.container {
    width: 100vw;
    height: 100vh;
}

.container main {
    width: 80%;
    height: 400px;
    margin: auto;

    border-radius: 30px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 3em;
    font-weight: 800;
    color: white;

    background: rgb(70, 100, 52);
}

.container footer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.container footer .expand {
    width: 200px;
    height: 50px;
    background: royalblue;

    border-radius: 40px 40px 0 0;

    position: fixed;
    bottom: 0px;
    
    display: flex;
    justify-content: center;

    font-size: 1em;
    color: white;

    transition: 1000ms;
}

.container footer .expand:hover {
    width: 100%;
    animation-name: resize;
    animation-duration: 700ms;
    height: 150px;

    border-radius: 0;
}

@keyframes resize {
    0% {
        height: 50px;        
        border-radius: 60px 60px 0 0;
    }
    50% {
        height: 160px;
        border-radius: 90px 90px 0 0;
    }
    100% {height: 150px;}
}

    <div class="container">
        <main>
            this is your main feed
        </main>
        <footer>
            <div class="expand">^^^</div>
        </footer>
    </div>

ReactJS 在悬停时显示元素

ReactJS show element on hover

javascript

css

reactjs

framer-motion