Vue2 ( 3 ) 过渡

1. 过渡css-类名

Vue2 ( 3 ) 过渡_第1张图片

这里v- 是类名的前缀,当有多个过渡使用区别 , 此时v-enter 替换成: ss-enter等。


<html>
  <head>
    <title>transitiontitle>
    <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">hellop>
      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配合使用:


<html>
  <head>
    <title>与animated配合title>
    <link href="https://unpkg.com/[email protected]/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">hellop>
      transition>
    div>
  body>
  <script src="./vue.js">script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        show: true
      }
    })
  script>
html>

3. 钩子函数

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


<html>
  <head>
    <title>钩子函数title>
    <style>
    style>
  head>
  <body>
    <div id='app'>
      <button @click="show=!show">togglebutton>
      <transition
        v-on:before-enter='beforeEnter'
        v-on:enter='enter'
        v-on:leave='leave'
        v-bind:css='false'
      >
        <p v-if='show'>Demop>
      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>

你可能感兴趣的:(组件化,vue,web前端,移动端)