vue动画钩子函数应用：加入购物车初步模型（小半场）

最新推荐文章于 2020-01-10 20:05:38 发布

Avery_xu

最新推荐文章于 2020-01-10 20:05:38 发布

阅读量125

点赞数

分类专栏： vscode 文章标签： vue js

本文链接：https://blog.csdn.net/avery_xu/article/details/103819376

版权

vscode 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

body部分行为控制代码

<transition 
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <!-- 当div中的flag值改变时，会触发transition申明中的一系列重写钩子函数内容的执行，script行为执行函数即为重写的钩子函数 -->
      <div class="ball" v-show="flag"></div>
  </transition>

script行为执行函数（vue动画的定义钩子函数的应用）

//el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
//大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
         beforeEnter(el){
          el.style.transform="translate(0,0)"
        },
        enter(el,done){
          //强制动画刷新
          el.offsetWidth
          el.style.transform="translate(150px,450px)"
          el.style.transition='all 1s ease'
          //afterEnter()的引用，相当于执行afterEnter(el)
          done()
        },
        afterEnter(el){
          this.flag=!this.flag
        }

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="快到碗里来" @click="flag=!flag">
    <transition 
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
  </transition>
  </div>

  <script>
    var vm=new Vue({
      el:'#app',
      data:{
        flag:false
      },
      methods:{
        //el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
        //大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
        beforeEnter(el){
          el.style.transform="translate(0,0)"
        },
        enter(el,done){
          //强制动画刷新
          el.offsetWidth
          el.style.transform="translate(150px,450px)"
          el.style.transition='all 1s ease'
          //afterEnter()的引用，相当于执行afterEnter(el)
          done()
        },
        afterEnter(el){
          this.flag=!this.flag
        }
      }
    });
  </script>
</body>
</html>

Avery_xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue动画钩子函数应用：加入购物车初步模型（小半场）

body部分行为控制代码<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="flag"></div> </transition>...
复制链接

扫一扫