day2-过渡和动画

最新推荐文章于 2023-12-19 11:06:54 发布

reaaal

最新推荐文章于 2023-12-19 11:06:54 发布

阅读量117

点赞数

分类专栏： vue视频跟学

本文链接：https://blog.csdn.net/reaaal/article/details/107376843

版权

vue视频跟学专栏收录该内容

11 篇文章 0 订阅

订阅专栏

vue中过渡的使用

Vue提供了transition的封装组件，在以下情况中，可以给任何元素和组件添加进入/离开过渡。
在需要过渡的元素外面包裹一层transition标签，并给这个标签一个name属性。

条件渲染（v-if）
条件展示（v-show）
动态组件
组件根节点

  <style>
    /* 进入时的过渡状态和离开时的过渡状态 */
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity .5s;
    }

    /* 进入时的开始状态和离开时的结束状态 */
    .fade-enter,
    .ffade-leave-to {
      opacity: .5
    }
  </style>
  
<div id="app">
    <button @click="isShow=!isShow">点击切换</button>
    <transition name="fade">
      <p v-show="isShow">哈哈哈</p>
    </transition>
  </div>
  
   <script>
    const vm = new Vue({
      el: '#app',
      data: {
        isShow: true
      }
    })
  </script>

从无带有：本身是隐藏的，点击按钮显示出来。

.fade-enter：一开始进入（没有）时的状态
.fade-enter-active：从无到有的过程的状态
.fade-enter-to：从无到有结束时的状态

从有到无：本身是显示的，点击按钮隐藏。

.fade-leave：从有到无（有）的时候的状态
.fade-leave-active：从有到无的过程的效果
.fade-leave-to：没有的时候的状态

小demo：

<style>
    .s {
      width: 100px;
      height: 30px;
      background: green;
      margin-top: 30px;
    }

    .slide-enter-active {
      transition: all 2s;
    }

    .slide-leave-active {
      transition: all 2s;
    }

    .slide-enter,
    .slide-leave-to {
      transform: translateX(20px)
    }
  </style>
  
<div id="app">
    <button @click="isShow=!isShow">实现过渡效果</button>
    <transition name="slide">
      <div class="s" v-show="isShow"></div>
    </transition>
  </div>
  
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        isShow: true
      }
    })
  </script>

vue中动画使用

  <style>
    .s {
      width: 80px;
      height: 40px;
      background: green;
      margin-top: 30px;
    }

    /* 显示的状态效果 */
    .bounce-enter-active {
      animation: bounce-in .5s;
    }

    /* 隐藏的状态效果 */
    .bounce-leave-active {
      animation: bounce-in .5s reverse
    }

    /* 自定义动画 */
    @keyframes bounce-in {
      0% {
        transform: scale(0)
      }

      50% {
        transform: scale(2)
      }

      100% {
        transfrom: scale(1)
      }
    }
  </style>
  
<body>
  <div id="app">
    <button @click="isShow=!isShow">实动画效果</button>
    <transition name="bounce">
      <div class="s" v-show="isShow"></div>
    </transition>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        isShow: true
      }
    })
  </script>
</body>