解决display:none到display:block无法实现过渡效果的问题(转换解决思路)

电玩女神 2022-12-29 14:28 162阅读 0赞

> 主要是解决问题的思路要转换一下

一开始我们的解决办法或许是通过transition来实现过渡的，但是对于不存在的元素我们是无法从无到有来过渡的。

所以我们可以通过先让内容显示出来，然后再给他们加入animation的动画来实现。具体办法就是让父容器作为display:none和display:block的显示过程。而里面的内容就相当于一开始就是存在的了，我们再让它从透明度为0到1的显示就可以了。

<div class="hover-on">
            <div class="line"></div>
            <div class="cart_choice">
                    <div class="cart_choice_item"><img src="./../../mat/src/image/index/cart.png" alt=""></div>
                    <div class="cart_choice_item"><img src="./../../mat/src/image/index/love.png" alt=""><img src="./../../mat/src/image/index/love_a.png" alt=""></div>
            </div>
     </div>

.curriculum .curri_item .hover-on{ display: none;}
    .curriculum .curri_item:hover .hover-on{ display: block;}
    .curriculum .curri_item .line{ width: 100%; height: 1px; border-bottom: 1px solid #eeeeee;margin: 0.6667rem 0 0.8333rem;animation:moveup 1s; animation-fill-mode:forwards;}
    .curriculum .cart_choice{ opacity: 0; display: flex; justify-content: center; align-items: center;animation:moveup 1s; animation-fill-mode:forwards;animation-delay:.5s;}
    @keyframes moveup{  from{  transform: translateY(2.5rem);} to{ opacity: 1; transform: translateY(0);} }

cart_choice的display:none改为opacity:0;

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL数据类型转换常见问题及解决思路

在MySQL中，数据类型的转换可能会遇到一些问题。以下是一些常见的问题以及解决思路： 1. **类型不匹配**：当你试图将一个数据类型不适合的目标值赋给一个变量时，会出现这种

旧城等待，/ 2025年03月21日 13:30/ 0 赞/ 42 阅读

相关 MySQL：无法连接到服务器的问题解决

无法连接到MySQL服务器，通常有以下几个原因，你可以根据实际情况排查： 1. **网络问题**： - 确保你的电脑已连接到互联网。 - 测试其他网站或服务是否可

不念不忘少年蓝@/ 2025年01月05日 11:06/ 0 赞/ 115 阅读

相关 MySQL：无法连接到服务器的问题解决

当在MySQL中遇到无法连接到服务器的问题时，可以尝试以下几种解决方案： 1. **检查网络连通性**：确保你的计算机已连接到互联网。你可以使用ping命令来测试网络

忘是亡心i/ 2024年12月22日 03:09/ 0 赞/ 133 阅读

相关解决display:none到display:block无法实现过渡效果的问题(转换解决思路)

> 主要是解决问题的思路要转换一下一开始我们的解决办法或许是通过transition来实现过渡的，但是对于不存在的元素我们是无法从无到有来过渡的。所以我

电玩女神/ 2022年12月29日 14:28/ 0 赞/ 163 阅读

相关 CSS3实现过渡效果 (transition)

CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。 transition 功能：实现元素不同状态之间的平滑过渡。此前

今天药忘吃喽~/ 2022年11月16日 10:53/ 0 赞/ 341 阅读

相关【Centos】sshd 无法启动（解决问题篇，附问题排查思路和解决方法）

前言美好的一天，从帮人运维开始 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pS

ゝ一世哀愁。/ 2022年09月10日 05:17/ 0 赞/ 1592 阅读

相关 CSS过渡效果

过渡定义：过渡用于指定一个或多个属性发生变化时的切换方式，可以提高用户属性，transition 具体属性： transition-property:指定

喜欢ヅ旅行/ 2022年09月04日 08:59/ 0 赞/ 275 阅读

相关 vue实现slide过渡效果

直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

矫情吗；*/ 2022年05月12日 05:18/ 0 赞/ 382 阅读

相关 springcloud模块无法注册到consul上以及json转换的问题解决

1.springcloud本地跑的时候,注册发现地址与ip不相符的时候,工程模块consul是无法注册成功的要使得一下配置与本地ip一致: spring.clou

淩亂°似流年/ 2022年03月12日 04:44/ 0 赞/ 665 阅读

相关 Linux 无法连通外网解决思路

今天本来想用虚拟机在网上下点配置文件，结果显示： ![在这里插入图片描述][2020060611190571.png] 一开始以为是网站的问题然后就ping了一下 ww

╰+攻爆jí腚メ/ 2021年05月16日 20:36/ 0 赞/ 718 阅读