vue中的动画及钩子初步探究

transition组件里面发生过渡或动画效果的条件:

  • 条件渲染 (使用 v-if
  • 条件展示 (使用 v-show
  • 动态组件
  • 组件根节点

满足以上任何一个条件即可

在被transition包裹的组件中,通常会使用v-if或v-show。在这个基础上来理解类的作用

v-enter:进入初始的状态,设置初始的样式

v-enter-to:进入以后(一般就是显示出来了)

v-enter-active:描述整个进入过程,所以过渡和动画设置在这个类中

v-leave:离开的初始状态

v-leave-to:已离开

v-leave-active:离开过程

一定是站在组件的角度来考虑当前组件是离开还是进入

 

动画钩子(一些事件)

动画或过度的每个阶段触发的事件,作用和类名差不多,下面看一个例子,效果如下:

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Vue Animation</title>
 <style>
 .demo {
   position: relative;
   width: 320px;
   height: 500px;
   border: 1px solid #999;
   margin: 10px auto;
 }

 .big-ball {
   background: red;
   position: absolute;
   width: 200px;
   height: 200px;
   top: 0;
   left: 60px;
   border-radius: 50%;
 }

 .mini-ball {
   background: red;
   position: absolute;
   width: 50px;
   height: 50px;
   top: 400px;
   left: 135px;
   border-radius: 50%;
 }

 .mini-enter {
   top: 100px;
   transform: scale(4);
 }

 .mini-enter-active {
   transition: all 0.5s ease-out;
 }

 @keyframes lift {
 0% {
   transform: translate3d(0, 320px, 0) scale(0.25);
 }
 60% {
   transform: translate3d(0, 0, 0) scale(1.1);
 }
 100% {
   transform: translate3d(0, 0, 0) scale(1);
 }
 }
 </style>
 <script src="https://unpkg.com/vue"></script>
</head>

<body>
 <div id="demo" class="demo">
 <transition name="big" @enter="enter" @after-enter="afterEnter" @leave="leave" @after-leave="afterLeave">
 <div class="big-ball" @click="show=!show" v-show="!show"></div>
 </transition>
 <transition name="mini">
 <div class="mini-ball" @click="show=!show" v-show="show"></div>
 </transition>
 </div>
 <script>
 new Vue({
   el: "#demo",
   data() {
   return {
   show: true
  }
 },
 methods: {
   enter(el, done) {
   el.style.animation = 'lift 1s';
 },
   afterEnter() {
   el.style.animation = '';
 },
 leave(el, done) {
   el.style.display = 'none';
  }
 }
 })
 </script>
</body>

</html>

 

vue
作者:张雪飞
出处:https://zhangxuefei.site/p/1949
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

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