一、安装

在命令行中执行:使用npm或者cnpm安装

npm install animate.css --save  或 cnpm install animate.css --save

二、引入

main.js全局引入

import animate from 'animate.css'
...
...
Vue.use(animate)//记得引入使用

三、页面使用

index.vue

<template>
	<div class="box">
		<button @click="toggleVisible">transition</button>
			<!--方法一-->
			<transition enter-active-class="animate__fadeIn" leave-active-class="animate__fadeOut">
				<h1 v-show="visible" class="animate__animated">Animate.css</h1>
			</transition>
			<!--方法二-->
			<transition enter-active-class="animate__animated animate__fadeInLeft"
				leave-active-class="animate__animated animate__fadeOutLeft">
				<h1 v-show="visible">Animate.css</h1>
			</transition>
			<!--方法三-->
			<transition-group enter-active-class="animate__fadeInRight" leave-active-class="animate__fadeOutRight">
				<h1 v-show="visible" class="animate__animated" :key="1">Animate.css</h1>
				<h2 v-show="visible" class="animate__animated" :key="2">Just-add-water CSS animations</h2>
			</transition-group>
	</div>
</template>


<script>
export default {
  name: 'App',
  data () {
    return {
      visible: false
    }
  },
  methods: {
    toggleVisible () {
      this.visible = !this.visible
    }
  }
}
</script>

注意: 这里的v-if也可以用v-show代替。vue的动画效果的原理是CSS中的transition属性

还有就是<transition>没有设置name属性,那么默认为v-enterv-enter-activev-leavev-leave-to


到此就结束了,下面是补充拓展内容…


vue中的css动画原理
需要实现动画效果的标签需要<transition>包裹

在这里插入图片描述


温馨提示: 更多高级用法请参考:官方文档


在Vue中同时使用过渡属性和动画

  • 通过appear实现页面的初次动画
  • 如何既使用animate.css的动画也使用transition过渡(文档:transition的使用
  • 当两个动画同时使用时以谁的动画时间为准,定义type来确定;除此还可以自定义动画时长

注意:不明白怎么使用的,一定要看文档

<template>
	<div id="root">
        <!--appear解决了第一次没有动画的,type="transition"设置以过渡效果的时长作为总时长-->
        <!--:duration="10000"设置自定义动画播放的时常,:duration="enter: 5000,leave: 10000"设置入场和出场的动画时间-->
        <transition
                type="transition" //区别就在此处
                name="fade"
                appear
                enter-active-class="animated swing fade-enter-active"
                leave-active-class="animated shake fade-leave-active"
                appear-active-class="animated swing"
        >
            <div v-if="visible">hello world</div>
        </transition>
        <button @click="toggleVisible">toggle</button>
    </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      visible: false
    }
  },
  methods: {
    toggleVisible () {
      this.visible = !this.visible
    }
  }
}
</script>

Vue中的Js动画与Velocity.js的结合

记得先引入velocity.js 官网链接

<template>
	<div id="root">
        <transition 
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
        >
            <div v-show="visible">hello world</div>
        </transition>
        <button @click="toggleVisible">toggle</button>
    </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      visible: false
    }
  },
  methods: {
    toggleVisible () {
      this.visible = !this.visible
    },
    handleBeforeEnter (el) {
      el.style.opacity = 0;
    },
    handleEnter (el, done) {
      Velocity(el, {
          opacity: 1
      }, {
          	duration: 1000,
            complete: done
         })
      },
      handleAfterEnter (el) {
        console.log("动画结束")
      }
  }
}
</script>

温馨提示:

  • 使用vue中的js钩子来实现js动画效果(js钩子:JavaScript钩子)
  • velocity.js动画库实现动画效果(官网:velocity.js

其中:before-enterenterafter-enter就是vue中的js钩子,查看更多就点击上面链接

注意:不明白怎么使用的,一定要看文档


Vue中多个元素或组件的过渡

<template>
	<div id="root">
        //多个元素的动画过渡
        <transition mode="out-in">
            <div v-if="visible" key="hello">hello world</div>
            <div v-else key="bye">Bye World</div>
        </transition>
        <button @click="handleClick">toggle</button>
 
        //多个组件的动画过渡
        <transition mode="out-in" >
            <component  :is="type"></component >
        </transition>
        <button @click="handleClick1">toggle</button>
    </div>
</template>

<script>
Vue.component('child',{
    template: '<div>child</div>'
 })
 
Vue.component('child-one',{
    template: '<div>child-one</div>'
 })
export default {
  name: 'App',
  data () {
    return {
      visible: false,
      type: 'child'
    }
  },
  methods: {
    toggleVisible () {
      this.visible = !this.visible
    },
    handleClick1 () {
      this.type = this.type === 'child' ? 'child-one' : 'child'
    }
  }
}
</script>

温馨提示:

  • 多个元素的动画过渡:这里使用的是默认的过渡类名,也可以在transition上添加name属性(文档:单元素/组件的过渡
  • 多个组件的动画过渡:这里使用的是component标签和 :is插槽的用法(文档:内置的组件-component

注意:不明白怎么使用的,一定要看文档


vue中的列表过渡

<template>
	<div id="root">
        <transition-group>
             <!-- 这里尽量不使用index作为key -->
            <div v-for="(item, index) of list" :key="item.id">
                {{item.title}}
            </div>
        </transition-group>
        
        <button @click="handleBtnClick">Add</button>
    </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      list: []
    }
  },
  methods: {
    handleBtnClick () {
           this.list.push({
           id:count++,
           title: 'hello world'+" "+ count
        })
    }
  }
}
</script>

温馨提示:

  • 使用transition-group来包裹列表,相当于在每个div上都加上了一个transition(文档:transition-group
  • 循环列表的key最好不使用index

注意:不明白怎么使用的,一定要看文档


vue中的动画封装

<template>
	<div id="root">
        <fade :show="show">
            <div>hello world</div>
        </fade>
           
        <fade :show="show">
            <h1>hello world</h1>
        </fade>
		<button @click="handleBtnClick">toggle</button>
    </div>
</template>

<script>
  Vue.component('fade', {
     props: ['show'],
     template:
       `<transition @before-enter="handleBeforeEnter"
          @enter="hanleEnter">
         <slot v-if="show"></slot>
        </transition>`,
     methods: {
         handleBeforeEnter (el) {
           el.style.color = 'red'
      	 },
         hanleEnter (el, done) {
           setTimeout(()=>{
             el.style.color = 'green'
                done()
             },2000)
           },
         }
       }) 
export default {
  name: 'App',
  data () {
    return {
	   show: false
    }
  },
  methods: {
    handleBtnClick () {
           this.show = !this.show
        })
    }
  }
}
</script>

温馨提示:

  • 有两种封装动画效果的方法:css动画和js动画,推荐使用js动画,这样可以把动画效果封装成一个组件,不需要全局定义css样式
Logo

前往低代码交流专区

更多推荐