Vue2 ( 3 ) 过渡

来源：互联网发布：淘宝刷到一天能赚多少编辑：程序博客网时间：2024/06/08 06:06

1. 过渡css-类名

这里写图片描述

这里v- 是类名的前缀，当有多个过渡使用<transition name="ss">区别 , 此时v-enter 替换成： ss-enter等。

<!DOCTYPE html><html>  <head>    <title>transition</title>    <style>      .fade-enter-active, .fade-leave-active {        transition: opacity .5s      }      .fade-enter, .fade-leave-active {        opacity: 0      }    </style>  </head>  <body>    <div id='app'>      <button v-on:click="show = !show">切换</button>      <transition name='fade'>        <p v-if="show">hello</p>      </transition>    </div>  </body>  <script src="./vue.js"></script>  <script type="text/javascript">    new Vue({      el: '#app',      data: {        show: true      }    })  </script></html>

2. 自定义过渡类名

同上的四种状态类似，对于自定义过渡类名：
enter-class ，leave-class
enter-active-class ， leave-active-class

这些类的优先级都高于普通类名，一般我们都与animated.css配合使用：

<!DOCTYPE html><html>  <head>    <title>与animated配合</title>    <link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">  </head>  <body>    <div id='app'>      <button v-on:click="show = !show">切换</button>      <transition        enter-active-class="animated tada"        leave-active-class="animated bounceOutRight"      >        <p v-if="show">hello</p>      </transition>    </div>  </body>  <script src="./vue.js"></script>  <script type="text/javascript">    new Vue({      el: '#app',      data: {        show: true      }    })  </script></html>

3. 钩子函数

在钩子函数中直接操作DOM，具体关注组件的状态，在某个阶段给我们做一些处理（el很重要。。）。

<!DOCTYPE html><html>  <head>    <title>钩子函数</title>    <style>    </style>  </head>  <body>    <div id='app'>      <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>  </body>  <script src="./vue.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>  <script type="text/javascript">    new Vue({      el: '#app',      data: {        show: true      },      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 })        }      }    })  </script></html>

阅读全文

1 0