Vue动画实现方式

origami0227
77 阅读3分钟

Vue动画方式1 - CSS transition

HTML

//先引入Vue(bootCDN)

<script src="[https://cdn.bootcdn.net/ajax/libs/vue/2.5.16/vue.min.js](https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.min.js)"></script>

<div id="demo">

  <button v-on:click="show = !show">

    Toggle

  </button>

<!--写`<transition>标签`-->

  <transition name="fade">

    <p v-if="show">hello</p>

  </transition>

</div>

CSS

/**写类**/

.fade-enter-active, .fade-leave-active {

  transition: all 2s;/*设置全部都变*/

  }

.fade-enter, .fade-leave-to {

  opacity: 0;

  width:100px

  }

p{

  border:1px solid red;

  width:300px /*设置初始宽度*/

  }

JS

new Vue({

  el: '#demo',

  data: { show: true }

})

步骤 第1步.在html里写 第2步.在css里写.fade开头的一系列类 最后给需要的属性添加初始值 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则v-是这些类名的默认前缀。如果你使用了 <transition name="fade">，那么v-enter会替换为fade-enter。 v-enter-active、v-leave-active表示过渡时间有多长。 v-enter、v-leave-to表示进入和退出状态，这2个类一般可以合写。

1.gif

Vue动画方式2 - CSS animation

html
<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce"> //bounce类的前缀
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </transition>
</div>

CSS
.bounce-enter-active { 
  animation: bounce-in .5s;
}
.bounce-leave-active { 
  animation: bounce-in .5s reverse; //bounce-in
}
@keyframes bounce-in { //bounce-in
  0% {transform: scale(0);}
  50% {transform: scale(1.5);}
  100% {transform: scale(1);} //结束时恢复正常状态
}

JS
new Vue({
  el: '#example-2',
  data: { show: true }
})

2.gif

由于我们很难用animation做出好看的动画我们可以引入一些第三方库，比如Animate.css 提供了很多动画效果。

html

<link href="[https://cdn.bootcdn.net/ajax/libs/animate.css/3.5.2/animate.min.css](https://cdn.bootcdn.net/ajax/libs/animate.css/3.5.2/animate.min.css)" rel="stylesheet">

<div id="example-3">

  <button @click="show = !show">

    Toggle render

  </button>

  <transition

    enter-active-class="animated tada"

  //animated后接的就是动画效果，格式animated xxx

    leave-active-class="animated bounce"

  >

    <p v-if="show">hello</p>

  </transition>

</div>

JS

new Vue({

  el: '#example-3',

  data: {show: true}

})

3.gif

同时使用过渡和动画

在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation很快的被触发并完成了，而transition效果还没结束。在这种情况中，你就需要使用type属性并设置animation或transition来明确声明你需要Vue监听的类型。

显性的过渡持续时间

有的时候需要手动设置淡入淡出时间

<transition :duration="1000">...</transition> //:duration="1000"

Vue动画方式3 - JS 操作动画

velocity是一个非常著名的用JS操作动画的库,推荐用这个做动画。

<script src="[https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js](https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js)"></script>

<div id="example-4">

  <button @click="show = !show">

    Toggle

  </button>

  <transition

    v-on:before-enter="beforeEnter"

    v-on:enter="enter"

    v-on:leave="leave"

    v-bind:css="false"

  >

    <p v-if="show">

      Demo

    </p>

  </transition>

</div>

JS

new Vue({

  el: '#example-4',

  data: {

    show: false

  },

  methods: {

    beforeEnter: function (el) {

      el.style.opacity = 0

      el.style.transformOrigin = 'left'

    },

    enter: function (el, done) {

      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })

      Velocity(el, { fontSize: '1em' }, { complete: done })

    },

    leave: function (el, done) {

      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })

      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })

      Velocity(el, {

        rotateZ: '45deg',

        translateY: '30px',

        translateX: '30px',

        opacity: 0

      }, { complete: done })

    }

  }

})

4.gif

Vue动画方式4 - 多元素动画

多个元素的过渡

<div id="example-4">
  <transition name="fade" mode="out-in">
    <button key="on" v-if="status==='off'" @click="status='on'">on</button>
    <button key="off" v-else @click="status='off'">off</button>
  </transition>
</div>

#example-4{
  position:relative;
  padding:100px;

new Vue({
    el: '#example-4',
    data: { status: 'on'},
})

5.gif

必须要加key才有动画,不然它不知道你要变什么，它会以为两个button是一个。当两个标签一样的时候一定要加key。

同时生效的进入和离开的过渡不能满足要求，所以Vue提供了过渡模式:

out-in：当前元素先进行过渡，完成之后新元素过渡进入。

in-out(用的少):淡出的时候往左移

mode="out-in/in-out"是为了解决2个元素占用位置冲突的问题。

多个组件过渡

就是用绑定is属性

只需要使用动态组件

<div id="transition-components-demo">
  <button @click="view='v-a'">a</button>
    <button @click="view='v-b'">b</button>
  <transition name="component-fade" mode="out-in">
    <component v-bind:is="view"></component>
  </transition>
</div>

JS
new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a' //view是啥，就是哪个组件的名字
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})

CSS
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to {
  opacity: 0;
}

6.gif

Vue动画5 - 列表动画

<div id="list-demo" class="demo">
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list" tag="p"> 
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>

JS
new Vue({
  el: '#list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
  }
})

CSS
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

7.gif

1.name="list"list就是css的前缀

2.<transition-group> 组件

使用场景:要想用v-for实现同时渲染整个列表，这时候就可以使用`组件。

这个组件过渡模式不可用，因为我们不再相互切换特有的元素。 mode="out-in"不能用，<transition-group>不支持mode

内部元素总是需要提供唯一的 key attribute 值。 内部元素必须写keyv-bind:key="item"

avatar
文章
阅读
粉丝