前言记得transition和transition-group是用来在一个vue组件中设置过渡动画的。总结起来可以分为name版本，jshook操作类名版本，jshook操作内联样式版本...template模板结构//单元素hello
//list元素：注意group的直接子元素是由v-for
渲染的nameversion，name是属性在组件中出现的过程：name-enter（初始状态）=>name-enter-active（中间状态）=>name-enter-to（终止状态）消失过程：name-leave=>name-leave-active=>name-leave-to以过渡动画为例，我们可以分别设置enterstage和enter-to阶段动画1.设置需要的属性进入时转换。名称输入{不透明度：0;transform:translateY(30px)}2.然后在name-enter-active中设置transitiontime。name-enter-active{transition:all.3s;}3.最后在name-enter-to中写入终端状态属性。实际上，终端状态的不透明度：1；transform：none；是默认的，你不需要写.name-enter-to{opacity:1;转换：翻译Y（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;}退出动画同理...jshook实现转场动画：通过操作类名；是js实现的name版本//比如上面的列表可以顺序显示//methods:{//定义上面的类nameinadvance//在beforeEnterenterafterEnterhook中手动操作上面的类名//初始状态beforeEnter(dom){dom.classList.add('list-enter','list-enter-ac略去');},//中间状态enter(dom,done){//通过setTimeout+dataset的转换letdelay=dom.dataset.delay;setTimeout(function(){dom.classList.remove('list-enter');dom.classList.add('list-enter-to');//监听transitionend事件vartransitionend=window.ontransitionend?"transitionend":"webkitTransitionEnd";dom.addEventListener(transitionend,functiononEnd(){//移除事件dom.removeEventListener(transitionend,onEnd);//调用done()，表示动画完成done()});},delay)},//终止状态afterEnter(dom){dom.classList.remove('list-enter-to','list-enter-active');}}jshook转场动画：通过操作内联属性，自定义动画//对应的操作方法;添加自定义数据集，为dom设置css样式；根据需要添加方法：{//初始状态beforeEnter(dom){let{x=0,y=0,opacity=0}=dom.dataset;主场。style.cssText=`transition:.3s;opacity:${opacity};transform:translateX(${x})translateY(${y});`;},//中间状态enter(dom,done){letdelay=dom.dataset.delay;setTimeout(function(){dom.style.cssText=`transition:.3s;opacity:1;transform:translateX(0)translateY(0);`;//监听transitionend事件vartransitionend=window.ontransitionend?"transitionend":"webkitTransitionEnd";dom.addEventListener(transitionend,functiononEnd(){dom.removeEventListener(transitionend,onEnd);done();});},delay)},//终止状态afterEnter(dom){dom.style.cssText="";}}这里记录css3的动画动画和transition事件：webkit-animation动画有三个事件：开始事件：webkitAnimationStart结束事件：webkitAnimationEndrepeatmotion事件：webkitAnimationIterationtransitionpropertytransitionofcss3:一个事件transitionends:webkitTransitionEnd
