当前位置：首页 > article >正文

vue动画特效

article 2024/11/18 17:11:41

1.在public下的index.html文件下引入动画库animate.css

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <!-- 引入动画库 -->
  <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
</body>
</html>

2.在组件TransitionDemo.vue里引入动画类名

<template>
  <div class="hello">
    <button v-on:click="show = !show">Toggle</button>
    <!-- 引入动画特效 -->
    <transition 
      name="custom-classes-transition" 
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

3.使用gsap实现数字动画效果

<template>
	<div>
		<div>---状态过渡动画---</div>
    	<div>
    		<input v-model.number="number" type="number" step="20">
      		<p>{{animatedNumber}}</p>
   		</div>
   	</div>
 </template>

export default {
	data() {
    	return {
     		number: 0,
     	 	tweenedNumber: 0
    	}
  	},
  	computed: {
    	animatedNumber: function () {
      		return this.tweenedNumber.toFixed(0)
    	}
  	},
  	watch: {
    	number: function (newValue) {
        	window.gsap.to(this.$data, {duration: 0.5,tweenedNumber: newValue})
    	}
  	}
}