VUE学习:vue基础19————动画01:过渡

提示:
VUE学习:vue基础19————动画01:过渡

VUE学习:vue基础19————动画01:过渡

  • 前言
  • 动画
    • 过渡
      • 过渡案例演示
      • 过渡类名
        • 过渡类名的触发条件
      • 移动过渡效果


前言

本文学习Vue的动画相关内容。


提示:以下是本篇文章正文内容,下面案例可供参考

动画

过渡

过渡案例演示

<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="vue.js">script>
   <style>
      /*设置transition组件管理的内容在显示和隐藏时的样式*/
      .v-enter-active,.v-leave-active{
       
         transition: all 2s;
      }
      .v-enter,.v-leave-to{
       
         opacity: 0;
      }
      .v-enter-to,.v-leave{
       
         opacity: .5;
      }
   style>
head>
<body>
<div id="app">
   <button type="button" @click="toggle">{
    {btnMsg}}button>
   <transition>
      <template v-if="isShow">
         <div style="height: 200px;width: 200px;background-color: pink;line-height: 200px;text-align: center;color: whitesmoke;font-size: 24px;font-weight: bold">
            RNGNB!
         div>
      template>
   transition>
div>
body>
<script>
   let vm = new Vue({
       
      el: "#app",
      data: {
       
         isShow:true,
         btnMsg:'隐藏'
      },
      methods: {
       
         toggle(){
       
            this.isShow=!this.isShow;
            this.btnMsg=this.isShow?"隐藏":"显示"
         }
      }
   });
script>

演示效果:

VUE学习:vue基础19————动画01:过渡_第1张图片

过渡类名

v-enter:定义元素被插入之前的状态,插入后自动移除

v-enter-to:定义元素进入过渡的状态,此时v-enter被移除

v-enter-active:定义元素插入的整个过程状态,对于过渡所需时间、延迟等内容的设置都应该在该类中实现

v-leave:定义元素被移除之前的状态,开始移除元素则自动移出该样式

v-leave-to:定义元素执行移除的操作时状态,此时v-leave被移除

v-leave-active:定义元素移除的整个过程状态,对于过渡所需时间、延迟执行等内容的设置在该类中实现

过渡类名的触发条件

在Vue提供的transition组件中,使用条件渲染(v-if)或者条件展示(v-show)的时候自动触发进入和离开的过渡效果。

6种过渡类样式会自动切换,完成后全部消失。

移动过渡效果

appear属性设置页面在刷新时,自动执行过渡效果,不会影响按钮执行的效果

<head>
   <meta charset="UTF-8">
   <title>Titletitle>
   <script src="vue.js">script>
   <style>
      .move-enter-active,.move-leave-active{
       
         transition: all 5s;
      }
      .move-enter,.move-leave-to{
       
         opacity: 0;
         transform: scale(2) translateX(500px);
      }
   style>
head>
<body>
<div id="app">
   <button type="button" @click="isMove=!isMove">移动切换button>
   
   <transition appear name="move">
      <h2 v-if="isMove">Hello World!h2>
   transition>
div>
body>
<script>
   let vm = new Vue({
       
      el: "#app",
      data: {
       
         isMove:true
      },
      methods: {
       

      }
   });
script>

VUE学习:vue基础19————动画01:过渡_第2张图片

你可能感兴趣的:(vue.js,新星计划,vue.js)