Vue2 ( 3 ) 过渡

最新推荐文章于 2024-02-03 16:58:37 发布

zhangr16xyz

最新推荐文章于 2024-02-03 16:58:37 发布

阅读量279

点赞数 1

分类专栏：组件化 vue web前端移动端

本文链接：https://blog.csdn.net/weixin_36079296/article/details/73550580

版权

web前端同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

移动端

4 篇文章 0 订阅

订阅专栏

组件化

2 篇文章 0 订阅

订阅专栏

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>

zhangr16xyz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2 ( 3 ) 过渡

1. 过渡css-类名这里v- 是类名的前缀，当有多个过渡使用<transition name="ss">区别 , 此时v-enter 替换成： ss-enter等。 <!DOCTYPE html><html> <head> <title>transition</title> <style> .fade-enter-active, .fade-leave-a
复制链接

扫一扫