Vue实现简单购物车小球动画效果

最新推荐文章于 2024-07-25 08:14:42 发布

这是我的自己

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量971

点赞数

分类专栏： vue课程笔记文章标签： vue css css3

本文链接：https://blog.csdn.net/weixin_41355989/article/details/105954873

版权

vue课程笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue实现简单购物车小球动画效果在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <style type="text/css">
  #ball{
   width: 0.9375rem;
   height: 15px;
   background-color: red;
   border-radius: 50%;
  }
 </style>
 <body>
  <div id="app">
   <input type="button" name="" id="" value="加入购物车" @click="flag=!flag"/>
   <!-- 使用transition把元素小球包裹起来 -->
  <transition 
  @before-enter="beforeEnter" 
  @enter="Enter" 
  @after-enter="afterEnter">
   <div id="ball" v-if="flag">
    
   </div>
   </transition>
  </div>
 </body>
 <script type="text/javascript">
  var vm = new Vue({
   el:'#app',
   data:{
    flag:false
   },
   methods:{
    //el:动画钩子函数的第一个参数，表示要执行动画的DOM元素，是原生的JS对象。可以认为，el是通过document.getElemtById("")方式获取的DOM对象。
    beforeEnter(el){
     //beforeEnter：表示动画进入前，动画尚未开始，可以在此设置动画开始前的起始样式。
     //设置起始位置
     el.style.transform="translate(0,0)"
    },
    Enter(el,done){
     //el.offsetWidth在这并没有什么作用，但是没有也不行，会没有动画效果。可理解为强制动画刷新
     el.offsetWidth
     el.style.transform="translate(150px,450px)"
     el.style.transition="all 1s ease"
     //done是必须的，起始就是afterEnter这个函数，也就是说，done是afterEnter的引用。
     //done()如果没有，动画效果不会到达位置后立即消失，而是要过几秒。视觉效果不好。
     done()
    },
    afterEnter(el){
     this.flag=!this.flag
    }
   }
  })
 </script>
</html>

总结：
购物车的Vue的动画实现，不使用 6 个 class 来切换，因为6个class是实现整场的效果，而购物车小球是半场的。所以使用Vue的JavaScript 钩子实现，只写出现半场效果即可

6个class：

JavaScript 钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
 
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>

这是我的自己

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue实现简单购物车小球动画效果

Vue实现简单购物车小球动画效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.js" type="text/javascript" charset="utf-8">...
复制链接

扫一扫

专栏目录