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

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

一开始我们的解决办法或许是通过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;