时间戳

首页 > 解决方案 > 点击时的 jQuery 和 CSS3 圆角动画

javascript - 点击时的 jQuery 和 CSS3 圆角动画

问题描述

我有一个带有购物篮图标的 HTML 结构，单击该图标会打开一个侧边栏 div 以获取购物车信息：

https://jsfiddle.net/wv72best/

 $(document).ready(function() {
        $('#satcb_sticky_cart a').click(function() {
            $('.satcb-cs').slideToggle('slow');
            return false;
        });
    });
    $(document).ready(function() {
        $('.satcb-cs-close').click(function() {
            $('.satcb-cs').slideToggle('slow');
            return false;
        });
    });

我希望这个侧边栏从小圆圈动画到大正方形。类似于此 gif： https ://miro.medium.com/max/700/1*HUTzsvJJxJaLMBXXLuKNFg.gif

但唯一的区别是，在 gif 中，动画占据了整个页面，在我的情况下，我只希望它根据上面结构中侧边栏的宽度来占据。

我对此进行了广泛的研究并找到了一个示例： https ://jsfiddle.net/f7j01mtx/

我已经尝试但未能在我的结构中实施该示例，并且希望在这方面提供任何帮助。

非常感谢！

标签： javascripthtmljquerycss

解决方案

你可以像这个想法一样使用 css 过渡。

$(".cartView").on("click",function(){
$(this).toggleClass("expand border");
});
.parent{
background-color: #eee; 
position: relative;
width:500px;
height:300px;
}

.cartView{
position: absolute; 
right: 10px; 
bottom: 10px; 
width: 50px; 
height: 50px; 
transition: all ease-in-out .5s;
background-color: red; 
border-radius:50%;
z-index: 999;
}

.view-layout{
opacity:0;
}

.expand{
width:100%;
height:100%;
right: 0px; 
bottom: 0px; 
border-radius:0%;
transition: all ease-in-out .3s;
}

.border{

}

.expand .view-layout{
transition: all .5s .5s;
opacity:1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" style="">
    <div class="cartView" style="">
    
       <div class="view-layout">
       <h5>cart view items</h5></div>
    </div>
</div>

推荐阅读