javascript 关键帧动画 vue关键帧动画

转载

代码工匠大师 2023-07-22 17:53:57

文章标签 javascript 关键帧动画 Vue javaScript ci 钩子函数 文章分类 JavaScript 前端开发

Vue 过渡 && 动画

一、CSS过渡

1.transition标签可以用来封装需要过渡的元素，添加entering/leaving 过渡，

条件是：
（1）使用条件渲染语句 v-if/v-show
（2）动态组件
（3）组件根节点

　　通过style标签设置过渡动画时需要为transition指定name属性，当指定了name属性之后，
vue会自动去找几个过渡动画需要的类

active类中一般放过渡属性，例如transition,animation等，放animation需要指定动画关键帧
（v-是这些类名的前缀，会被替换为transition中name属性）
 v-enter-active（进入中，过渡状态）
 v-enter（进入之前，开始过渡状态）
 v-enter-to(进入结束，开始过渡的结束状态) 一般不用
 v-leave-active（离开中，过渡状态）
 v-leave（离开前，离开过渡状态）
 v-leave-to(离开结束，离开过渡的结束状态) 一般不用

二、CSS动画

1.CSS动画同CSS过渡,也需要四个类，active类中放的是animation,需要指定关键帧，关键帧使用transform定义动画状态，当设置了transition的name属性之后，vue会自动去探测是否存在这几个类，如果有，就执行了类中的动画

2.自定义动画，通常用于和第三方动画库相结合

<transition 
		enter-active-class="animated tada"
		leave-active-class="animated bounceOutRight"
	>
		 <p v-if="show">hello</p>
	</transition>

　　为transition标签设置以下几个属性来指定动画需要的类,这几个类的优先级高于普通类，与第三方动画库相结合时十分有用

(1)enter-active-class
(2)enter-class
(3)enter-to-class
(4)leave-active-class
(5)leave-class
(6)leave-to-class

三、使用钩子函数设置动画

　　可以通过在transition标签中绑定钩子函数来设置过渡动画，几个钩子函数如下：

钩子函数	对应的参数
before-enter	(el)
enter	(el,done)
after-enter	(el)
enter-cancelled	(el)
before-leave	(el)
leave	(el,done)
after-leave	(el)
leave-cancelled	(el)

通常在before-enter或before-leave中指定状态，在enter或leave函数中执行动画

beforeEnter: function (el) {
        // 进入之前
        $(el).css({
            opacity: 0,
            color: 'red',
        });
    },
    
    enter:  function (el, done) {
    
	    // 第一种
	    $(el).animate({
	    	opacity:1,
	    },3000,function(){
	    	//需要在动画执行完毕的回调函数中调用done
	    	done();
	    })
	
		// 	第二种
		$(el).fadeIn(1000,()=>{
			done();
		})
		
		// 第三种 引入velocity动画库
		<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
		
		Velocity(el, {opacity: 1, translateX: '20px', fontSize: '2em'}, {duration: 300});
		Velocity(el, {translateX: '0px', fontSize: '1em'}, {complete: done})
		
    },

　　当只用 JavaScript 过渡的时候，在 enter 和 leave 中，回调函数 done 是必须的。否则，它们会被同步调用，过渡会立即完成。

四、初始渲染的过渡

通过为transition标签添加appear属性设置节点在初始渲染时的过渡效果

同样可以定义自定义类名 appear-class appear-to-class appear-active-class
通过可以定义JavaScript中的钩子函数
before-appear appear after-appear appear-cancelled
为transiton设置appear属性，如果没有对应的过渡类或者钩子函数会默认去执行before-enter,和enter钩子函数的内容

五、多元素的过渡

注意相同标签切换需要设置key属性：
　　当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容

transition标签内部最外部根节点只能有一个，但通过v-if,v-else-if,v-else设置切换时候可以有多个跟标签

六、过渡模式

为transition标签设置mode属性

(1)in-out:新元素先进行过渡，完成之后当前元素过渡离开
(2)out-in:当前元素先进行过渡，完成之后新元素过渡进入

七、多组件过渡

　　使用v-bind:is属性为保留组件component来指定要渲染成哪个组件

<transition name="component-fade" mode="out-in">
		<component v-bind:is="view"></component>
	</transition>

八、列表过渡

　　使用tranistio-group标签来为多个节点设置过渡
tranistio-group标签默认渲染成span标签，可通过为其设置tag="div"属性将其渲染成div
tranistio-group内部元素总是需要提供唯一的 key 属性值

九、列表位移过渡

transition-group标签添加v-move属性定义元素位置改变时使用的动画，同进入和离开动画一样，v会被替换成transition-group便签的name属性，也可以通过move-class自定义类来设置自定义位移时使用的类
当要设置离开时的位移过渡时需要设置绝对定位position:absolute

<!--filp-list为transition-group便签的name属性-->
	.flip-list-move {
		transition: transform 1s;
	}

十、Lazy sudoku

通过tranistion-group标签设置随机数独元素的切换，注意transition-group内的每个元素的v-bind:key需要绑定的和元素相关，不然只是简单的数字替换，非元素的移动

CSS:
		* {
			box-sizing: border-box;
		}

		.box {
			display: block;
			margin: 0 auto;
			width: 450px;
			height: 450px;
		}

		.item {
			display: inline-block;
			width: 50px;
			height: 50px;
			line-height: 50px;
			border: 1px solid #eee;
			text-align: center;
			color: #666;
		}

		.fade-move {
			transition: all 0.4s linear;
		}
		



HTML:
	<div id="app">
		<transition-group name="fade" class="box">
			<span v-for="item in numArr" :key="item.id" class="item" :style="item.bg">{{ item.num }}</span>
		</transition-group>
	</div>
	
	
	
JavaScript
	var app = new Vue({
        el: '#app',
        data: {
            numArr: new Array(81).fill(1).map((value, index) => {
                return {
                    num: (index % 9),
                    id: index,
                    bg:{
                        backgroundColor:'hsl(' + Math.floor(Math.random() * 360) + ',70% ,80%)'
                    }
                }
            }),
        },
        methods: {
            shuffle: function () {
                this.numArr.sort(function () {
                    return Math.random() - 0.5;
                });
            }
        },
        created: function () {
            this.shuffle();
        }
    });