zoukankan      html  css  js  c++  java
  • 在Vue中如何快速实现小球动画

    1. 在自己的页面中有做好相应的测试位置

    2. 然后给小球添加属性 v-show并且添加相应的数据(false)

    3.点击购物车 让 false = true;

    4.然后到重点了;  用 transition的标签 把要运动的小球包起来

    <transition @before-enter='beforeEnter' @enter='enter'  @after-enter='afterEnter'>   小球 </transition>

    5.在  methods 里 定义你上面写的方法:

    beforeEnter(el) {

      el.style.transform = ' translate( 0,0 )'

    },

    enter(el,done) {

      el.offsetWidth;

      el.style.transform = 'translate( 0,0 )                   [ 这里写的是终点位置 , 上面是起始位置 ]

      el.style.transition = 'all' 1s ease' ;

    },

    afterEnter(el){

      this.ballFlag = !this.ballFlag;                             [ 这里的ballFlag是 一个自己设定变量 true,或者 false ]

    6.这里 要在第五步的时候 把小球 的最终落点定好,  直接添加在第五步的  enter函数中;

    这里有个好玩的页面是 设计 球的运动轨迹的;     叫   cubic-bezier   可以搜搜看哦

    到这里就结束啦~   应该就可以实现了.

  • 相关阅读:
    springmvc视图解析
    mysql外键是多个id组成的字符串,查询方法
    mysql服务无法启动(1067错误)时数据备份的经验
    springboot(5) freemarker
    springboot(4) Log之Logbak
    springboot(3) junit单元测试
    集合类基础知识
    springboot(2) 数据库操作
    springboot(1)
    linux命令
  • 原文地址:https://www.cnblogs.com/blankOne/p/11379696.html
Copyright © 2011-2022 走看看