利用Vue实现一个简单的抛物线效果 - 行业资讯 - 肥雀云

　　介绍

这期内容当中小编将会给大家带来有关利用Vue实现一个简单的抛物线效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

<强> css片段

 .shop {
　　位置:固定;
　　前:300像素;
　　左:40像素;
　　}
　　.ball {
　　位置:固定;
　　左:32像素;
　　底部:22 px;
　　z - index: 200;
　　过渡:所有0.4年代cubic-bezier (0.49, -0.29, 0.75, 0.41);/*贝塞尔曲线*/}
　　在{
　　宽度:16 px;
　　高:16 px;
　　这个特性:50%;
　　background - color: rgb (0160220);
　　过渡:所有0.4 s线性;
　　}
　　.cart {
　　位置:固定;
　　底部:22 px;
　　左:32像素;
　　宽度:30 px;
　　高度:30 px;
　　background - color: rgb (0160220);
　　颜色:rgb (255255255);
　　}

<强> html片段

& lt; div id=癮pp"比; 　　& lt; ul类=皊hop"祝辞　　& lt;李v=跋頸tems"比; 　　& lt; span> {{item.text}} & lt;/span> 　　& lt; span> {{item.price}} & lt;/span> 　　& lt;按钮@click=癮dditem"祝辞添加& lt;/button> 　　& lt;/li> 　　& lt;/ul> 　　& lt; div类=癱art"在{{数}}& lt;/div> 　　& lt; div类=癰all-container"祝辞& lt; !——小球——比; 　　& lt; div)=扒騜alls"比; 　　& lt;过渡的名字=癲rop"@before-enter=癰eforeDrop"@enter=癲ropping"@after-enter=癮fterDrop"比; 　　& lt; div类=癰all"v-show=癰all.show"比; 　　& lt; div类=澳谠趇nner-hook"祝辞& lt;/div> 　　& lt;/div> 　　& lt;/transition> 　　& lt;/div> 　　& lt;/div> 　　& lt;/div>

<强> js片段

& lt; script> 　　新Vue ({ 　　埃尔:“# app" 　　数据:{ 　　数:0, 　　项目:( 　　{ 　　文字:“苹果“, 　　价格:15 　　}, 　　{ 　　文字:“香蕉“, 　　价格:15 　　} 　　), 　　鲍尔斯:[//小球设为3个　　{ 　　显示:假　　}, 　　{ 　　显示:假　　}, 　　{ 　　显示:假　　}, 　　), 　　dropBalls: [], 　　}, 　　方法:{ 　　additem(事件){ 　　this.drop (event.target); 　　这一点。数+ +; 　　}, 　　下降(el){//抛物　　(让我=0;i 　　

过渡属性可以查看官方文档,具体位置可以通过调试获得。

上述就是小编为大家分享的利用Vue实现一个简单的抛物线效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。