菜单

金沙国际vue二.0 中选用transition完结动画效果使用体验

2019年5月24日 - 金沙前端

ps:上面看下vue.js 二.*
使用transition实现动画效果

实质上便是个简易的todo
lists的小demo,能够观看,当当中2个成分过渡的时候,会潜移默化此外因素的连结。当然,删除开关其实本身也是二个transition过渡,也正是说能够在transition-group里使用transition,看下相关代码:

实践

金沙国际 1

金沙国际 ,本条案例其实很简短,通过三个transition来触发七个子成分的对接效果,我们只要求定义成分对应的过渡效果就能够,其余业务vue会帮大家搞定,因此能够扩大出别样炫目的联网场景效果。先来探望那些简单案例的代码达成:

<transition name="fade">
 <div class="detail" v-show="detailShow"></div>
</transition>
<script type="text/ecmascript-6">
 export default {
 };
</script>
<style lang="stylus" ref="sheetstyle/stylus">
 .fade-enter-active, .fade-leave-active 
 opacity:1
 transition: all 1.0s 
 background:rgba(7,17,27,0.8) 
 .fade-enter, .fade-leave-active 
 opacity: 0
 background:rgba(7,17,27,0)
</style>
export default {
  data () {
   return {
    shells: [
     {
      show: false
     },
     {
      show: false
     },
     {
      show: false
     }
    ]
   };
  },
  methods: {
   launch (event) {
    for (let i = 0; i < this.shells.length; i++) {
     let shell = this.shells[i];
     if (!shell.show) {
     shell.show = true;
     shell.target = event.target;
     return;
     }
    }
   },
   beforeEnter (el) {
    let count = this.shells.length;
    while (count--) {
     let shell = this.shells[count];
     if (shell.show) {
      let rect = shell.target.getBoundingClientRect();
      let left = rect.left - 32;
      let top = -(window.innerHeight - rect.top - 15);
      el.style.display = '';
      el.style.webkitTransform = `translate3d(0,${top}px,0)`;
      el.style.transform = `translate3d(0,${top}px,0)`;
      let inner = el.getElementsByClassName('inner')[0];
      inner.style.webkitTransform = `translate3d(${left}px,0,0)`;
      inner.style.transform = `translate3d(${left}px,0,0)`;
     }
    }
   },
   enter (el, done) {
    /* eslint-disable no-unused-vars */
    let refresh = el.offsetHeight;
    this.$nextTick(() => {
     el.style.webkitTransform = 'translate3d(0,0,0)';
     el.style.transform = 'translate3d(0,0,0)';
     let inner = el.getElementsByClassName('inner')[0];
     inner.style.webkitTransform = 'translate3d(0,0,0)';
     inner.style.transform = 'translate3d(0,0,0)';
    });
    done();
   },
   afterEnter (el) {
    let ball = this.shells[0];
    ball.show = false;
    el.style.display = 'none';
   }
  }
 };

能够见见大家的代码基本重如若完结css过渡效果的体制,而接触过渡效果只是简单地通过二个click事件就消除了,vue会自动嗅探指标成分是或不是有
CSS 过渡或动画,并在适龄时增加/删除 CSS
类名。那下3个demo就来轻易完结一下行使css animation 做衔接的效能。

.list
 display: flex
 width: 100%
 height: 40px
 line-height: 40px
 margin-bottom: 10px
 color: #666
 font-size: 14px
 background: #eee
 transition: all .4s
 &.slide-move
  transition: transform 1s
 &.slide-enter
  transform: translate3d(-100%, 0, 0)
 &.slide-leave-active
  position: absolute
  transform: translate3d(-100%, 0, 0)
 &:last-child
  margin-bottom: 0
 .del-btn
  flex: 0 0 60px
  border: none
  outline: none
  color: #fff
  background: red
  transition: all .4s
  &.move-enter, &.move-leave-active
   transform: translate3d(70px, 0, 0)
 .text
  flex: 1
  padding-left: 20px
<template>
 <div class="app">
  <button @click="add" class="add-btn">+</button>
  <transition-group name="slide" tag="ul" class="list-wrapper">
   <li class="list" v-for="(item, index) in lists" v-touch:swipeleft="showBtn.bind(this, index)" v-touch:swiperight="hideBtn.bind(this, index)" :key="item">
    {{item.text}}
    <transition name="move">
     <button class="del-btn" @click="delList(index)" v-show="item.show">删除</button>
    </transition>
   </li>
  </transition-group>
 </div>
</template>

先来探望demo效果:

金沙国际 2

此间将通过几个奉行小案例来体验和学习css过渡,css动画,javascript钩子,列表过渡的利用。至于案例用到的知识点就请自行学习官方网站文档。

您可能感兴趣的稿子:

那么些3个十一分low的模仿炮弹发射的景观,能够看看小球有抛物线轨迹运动的衔接,而且发射出来就不会再回到了,那么那几个demo正是使用了JavaScript钩子结合css来促成的,接下去看下关键代码:

金沙国际 3

连通成分就没有须要为其增多vue的对接css类名了,只需在要素自个儿加多transition就可以,那vue在头里css过渡的时候会自行帮大家去丰裕对应的类名来实现交接效果,然则用javascript钩子就须要大家协和产生那些内容状态的设置了。当大家点击触发一个过渡的时候,我们在beforeEnter里先得到当下因素的撼动地点,然后给过渡成分设置其开场地点,在enter里供给再行触发下浏览器的重绘,然后在下1帧重新安装成分的完工位置,那时就能生出过渡效果,在连接达成后大家将方今因素隐藏就可以。那刚才讲到的列表过渡,接下去正是有关利用transition-group的三个小demo了。

先是,由于笔者那么些demo是1组成分的连结,所以有个别童鞋就能够感到用二.0提供的transition-group不就行了嘛。不过transition-group是列表过渡,笔者的精通是那一组成分是相关联的、相互影响的,可是那些demo的元素每种都以独自的,只可是是壹组独立的因素过渡,所以如故用transition比较客观,那使用v-for就能够完毕1组1致过渡的成分啦。接下来看JavaScript钩子怎么落到实处这么些过渡:

sudo npm install --save git: //github.com/vuejs/vue-touch.git#next

从css代码能够见到,大家只是在vue过渡类名下加了分裂的animation而已。官方网址文书档案明显表明当只行使transition或animation个中壹种时,vue是能自行监听对应的类别的,可是假设同贰个要素相同的时间利用三种功效,就须求明白钦定监听哪壹种类型,然则官方网站并不曾交到具体的板栗。那实在那个demo已经轻巧地达成同有时间利用两种档期的顺序的场所,能够看出有三个光滑度的成形。然而假诺animation里应用了transform,并且外面也选择了transform的话,那么元素在接入的时候动画效果就能有争持,效果就有一点出入了。

如上所述是我给大家介绍的vue贰.0
中央银行使transition完结动画效果使用体验,希望对我们有所帮衬,假若大家有任何疑问请给自个儿留言,小编会及时过来大家的。在此也特别多谢大家对剧本之家网址的支撑!

有个小坑的地点正是,在此以前看官方网站列表过渡的板栗,它是1个数组,成分都是数字,并且每1项都必须安装唯1的key值。所以自身做到demo的时候就弄斧班门地将索引值传给key,结果过渡老是不对,后来交流对应的item就像常了(生无可恋脸)。那几个demo用到了vue-touch,尽管github上说不帮助二.0版本了,可是有二个next分支是帮忙的,只需在档期的顺序下安装它就可以:

<template>
 <div class="app">
  <button @click="showMenu" class="btn">{{text}}</button>
  <transition name="move">
   <div class="menu" v-show="show">
    <div class="inner inner-1">1</div>
    <div class="inner inner-2">2</div>
    <div class="inner inner-3">3</div>
   </div>
  </transition>
 </div>
</template>

<script type="text/ecmascript-6">
 export default {
  data () {
   return {
    show: false
   };
  },
  methods: {
   showMenu () {
    this.show = !this.show;
   }
  },
  computed: {
   text () {
    return this.show ? '收' : '开';
   }
  }
 };
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .app
  .btn
   position: fixed
   bottom: 50px
   right: 10px
   z-index: 10
   width: 50px
   height: 50px
   line-height: 50px
   border-radius: 50%
   border: none
   outline: none
   color: #fff
   font-size: 18px
   background: blue
  .menu
   position: fixed
   bottom: 50px
   right: 10px
   width: 50px
   height: 50px
   border-radius: 50%
   transition: all .7s ease-in
   &.move-enter-active
    .inner
     transform: translate3d(0, 0, 0)
     transition-timing-function: cubic-bezier(0, .57, .44, 1.97)
    .inner-1
     transition-delay: .1s
    .inner-2
     transition-delay: .2s
    .inner-3
     transition-delay: .3s
   &.move-enter, &.move-leave-active
    .inner
     transition-timing-function: ease-in-out
    .inner-1
     transform: translate3d(0, 60px, 0)
     transition-delay: .3s
    .inner-2
     transform: translate3d(40px, 40px, 0)
     transition-delay: .2s
    .inner-3
     transform: translate3d(60px, 0, 0)
     transition-delay: .1s
   .inner
    display: inline-block
    position: absolute
    width: 30px
    height: 30px
    line-height: 30px
    border-radius: 50%
    background: red
    text-align: center
    color: #fff
    transition: all .4s
   .inner-1
    top: -50px
    left: 10px
   .inner-2
    left: -30px
    top: -30px
   .inner-3
    left: -50px
    top: 10px
</style>

先来看看demo效果:

.ball-container
  .ball
  position: absolute
  left: 32px
  bottom: 22px
  z-index: 50
  transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
  .inner
   width: 16px
   height: 16px
   border-radius: 50%
   background: rgb(0, 160, 220)
   transition: all 0.4s linear

1.css过渡–实践

以此案例其实跟下边包车型地铁demo大概,不一样之处在于对接效果是行使css动画来促成,看下达成的代码:

此地看下首要的体制:

先看下demo效果:

金沙国际 4

4.transition-group – 实践

2.css 动画–实践

css样式代码:

3.JavaScript钩子 – 实践

<template>
 <div class="app">
  <div class="gun" @click="launch($event)"></div>
  <div class="shells-wrapper">
   <transition v-for="shell in shells" name="launch-shell" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
   <div class="shell" v-show="shell.show">
    <div class="inner"></div>
   </div>
   </transition>
  </div>
  <div class="goal"></div>


  <!--小球第二种-->
 <div class="ball-container">
  <ul>
  <li v-for="(ball,index) in balls" :key="index">
   <transition :css="false" name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
   <div class="ball" v-show="ball.show">
    <div class="inner inner-hook"></div>
   </div>
   </transition>
  </li>
  </ul>
 </div>
 <!--小球 End-->
 </div>
</template>

总结

如果改变一定过渡的duration与进入离开同样的话,其实能够不用-move,这里安装-move的连接的duration差别于成分进入离开的duration产生1种速度差,看起来舒服点。而且-leave-active要求安装position:
absolute才会有功力。未来看来其实列表过渡也是很轻巧完毕的。

前三个栗子都是有跻身和距离的连接,但是若是部分气象只必要进入过渡然后就终止了,那么此时就可以动用JavaScript钩子结合CSS
transitions/animations来落到实处,当然也足以独立接纳。看下demo:

<template>
 <div class="app">
 <button @click="showball" class="btn">show</button>
  <transition name="move" type="animation">
   <div class="ball" v-show="show">
    <div class="inner"></div>
   </div>
  </transition>
 </div>
</template>

<script type="text/ecmascript-6">
 export default {
  data () {
   return {
    show: false
   };
  },
  methods: {
   showball () {
    this.show = !this.show;
   }
  }
 };
</script>

<style lang="stylus" rel="stylesheet/stylus">
 @keyframes shape-change {
  0%, 100% {
   border-radius: 50%
   background: red
  }
  50% {
   border-radius: 0
   background: blue
  }
 }

 @keyframes moveball-in {
  0% {
   transform: translate3d(300px,-200px,0)
  }
  50% {
   transform: translate3d(100px,-400px,0)
  }
  100% {
   transform: translate3d(0,0,0)
  }
 }
 @keyframes moveball-out {
  0% {
   transform: translate3d(0,0,0)
  }
  50% {
   transform: translate3d(100px,-400px,0)
  }
  100% {
   transform: translate3d(300px,-200px,0)
  }
 }
 .app
  .btn
   width: 40px
   height: 30px
   margin-top: 40px
   border: none
   outline: none
   background: red
   color: #fff
  .ball
   position: absolute
   bottom: 20px
   left: 20px
   width: 50px
   height: 50px
   transition: all 1s cubic-bezier(.22,-0.86,.97,.58)
   &.move-enter-active
    opacity: 1
    animation: moveball-in 1s
    .inner
     animation: shape-change 1s
   &.move-leave-active
    opacity: 0.8
    animation: moveball-out 1s
    .inner
     animation: shape-change 1s
   .inner
    display: inline-block
    width: 30px
    height: 30px
    border-radius: 50%
    background: red
    transition: all 1s linear
</style>

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图