vue中的过渡动画

时间: 2019-06-08阅读: 147标签: 动画

前言

记一次vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版...


template模板结构

  // 单个元素
    <transition name="自定义名字">
      <p v-if="show">hello</p>
    </transition>
  // 列表元素: 注意group的直接子元素是v-for渲染出来的
    <ul class="list">
      <transition-group name="list">
        <li v-for="(item, index) in gameList" :key="item.id">
          <app-horizontal :itemData="item"></app-horizontal>
        </li>
      </transition-group>
    </ul>


name 版,name 为组件中的属性

出现的过程: name-enter(初始态) => name-enter-active(中间态) => name-enter-to(终止态)
消失的过程: name-leave => name-leave-active => name-leave-to

以进场过渡动画为例子

我们可以分别设置 enter 阶段 和 enter-to 阶段的动画
  1.设置进入时需要过渡的属性
  .name-enter
  {
    opacity: 0;
    transform: translateY(30px)
  }
  2.然后在 name-enter-active中设置过渡时间
  .name-enter-active {
    transition: all .3s;
  }
  3.最后在 name-enter-to 中写上终止态属性
    其实终止态的opacity: 1;transform: none; 是默认的,可以不用写
  .name-enter-to {
    opacity: 1;
    transform: translateY(0);
  }
  如果要给列表中的元素设置交错的效果, 元素不多的话可以添加 delay 属性
  .name-enter-active:nth-child(3n+1) {
    transition-delay: 0s;
  }
  .name-enter-active:nth-child(3n+2) {
    transition-delay: .1s;
  }
  .name-enter-active:nth-child(3n+3) {
    transition-delay: .2s;
  }
  离场动画同理...


js 钩子实现过渡动画: 通过操作类名; 就是 name 版的 js 实现

// 例如实现上述列表依次显示
  <ul class="list">
    <transition-group
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter">
      <li v-for="(item, index) in gameList" 
        :key="item.id" 
        :data-delay="index*100" 
      >
          <app-horizontal :itemData="item"></app-horizontal>
      </li>
    </transition-group>
  </ul>  
  // 
  methods: {
    // 事先定义上述类名
    // 在beforeEnter enter afterEnter 钩子中手动操作上述类名
    
    // 初始态
    beforeEnter(dom) {
      dom.classList.add('list-enter', 'list-enter-active');
    },
    // 中间态
    enter(dom,done) {
      // 通过 setTimeout + dataset 实现过渡
      let delay = dom.dataset.delay;
      setTimeout(function () {
        dom.classList.remove('list-enter');
        dom.classList.add('list-enter-to');
        //监听 transitionend 事件
        var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
        dom.addEventListener(transitionend, function onEnd() {
          // 移除事件
          dom.removeEventListener(transitionend, onEnd);
          //调用done(),表示动画已完成
          done()
        });
      }, delay)
    },
    // 终止态
    afterEnter(dom) {
      dom.classList.remove('list-enter-to', 'list-enter-active');
    }
  }


js 钩子过渡动画: 通过操作行内属性, 自定义动画

   <ul class="list">
    <transition-group
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter">
      <li v-for="(item, index) in gameList" 
        :key="item.id" 
        :data-delay="index*100"
        data-y = "100%" 
      >
          <app-horizontal :itemData="item"></app-horizontal>
      </li>
    </transition-group>
  </ul>  
  // 对应的操作方法; 添加自定义的 dataset,给dom设置css样式;根据需求添加
   methods: {
     // 初始态
    beforeEnter(dom) {
      let { x = 0, y = 0, opacity = 0 } = dom.dataset;
      dom.style.cssText = `transition: .3s;opacity: ${opacity};transform: translateX(${x}) translateY(${y});`;
    },
    // 中间态
    enter(dom,done) {
      let delay = dom.dataset.delay;
      setTimeout(function () {
        dom.style.cssText = `transition: .3s;opacity: 1;transform: translateX(0) translateY(0);`;
        //监听 transitionend 事件
        var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
        dom.addEventListener(transitionend, function onEnd() {
             dom.removeEventListener(transitionend, onEnd);
             done(); 
        });
      }, delay)
    },
    // 终止态
    afterEnter(dom) {
      dom.style.cssText = "";
    }
  }

这里记录一下监听css3的animation动画和transition事件:

webkit-animation动画有三个事件:
    开始事件: webkitAnimationStart
    结束事件: webkitAnimationEnd
    重复运动事件: webkitAnimationIteration

css3的过渡属性transition: 一个事件
    过渡结束: webkitTransitionEnd


链接: http://www.fly63.com/article/detial/4111

HTML复杂动画和变形

涉及到的属性:animation-name:动画名称;animation-duration:单次动画总时长;animation-timing-function:时间函数;animation-delay:播放前延时的时长;

css3 过渡和动画

在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到100px的位置,有时候我们为了达到某种视觉效果

css3动画 Transition

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的

使用CSS实现图片帧动画与曲线运动

在前端开发中,提到动画,我们可以:直接利用DOM实现动画。利用canvas实现动画。利用svg实现动画。直接用一张gif动图。利用图片实现帧动画。所有动画的基本原理都是:在短时间内连续依次展示对应的图片

jQuery中的事件、动画、表单应用

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。在事件中经常使用术语 触发或 激发,常用click()方法触发

Js封装一个简单的动画函数

动画函数多个目标值之间移动,1、如果是正值,则向大取整 2、如果是负值,则向小取整。清除定时器,是指清除谁的定时器,这里是轮播图,所以清除元素的定时器;创建定时器,清除定时器,页面中就没有定时器

为什么要用css动画替换js动画?

通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏览器会不停的执行重排和重绘,在PC版本的浏览器中,因为浏览器可用的内存比较大

用js实现一个无限循环的动画

为什么要说它,源于看到的一道面试题:问题是用js实现一个无限循环的动画。至于时间间隔为什么是1000/60,这是因为大多数屏幕渲染的时间间隔是每秒60帧。既然setInterval可以搞定为啥还要用requestAnimationFrame呢?

HTML5模拟齿轮动画

这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了

css3实现椭圆轨迹旋转

X轴Y轴在一个矩形内移动;设置动画延时设置Y轴延时为动画时长的一半, 运动轨迹变成菱形;设置三次贝塞尔曲线,为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全