• Vue动画效果


    1.哪些元素/那些组件适合在那些条件下实现动画效果

    • 条件渲染 (使用 v-if)
    • 条件展示 (使用 v-show)
    • 动态组件
    • 组件根节点

    简单经典例子:(文字隐藏到显示效果)

    <div>
      <button @click="show = !show">show toggle</button>
      <transition name="fade">  //fade 自定义名称
        <p v-if="show">hello</p>
      </transition>
    </div>
    
    <style>
    .fade-enter-active{     
      transition: opacity .5s;      //类名:隐藏到显示过程所需要的时间
    }
    .fade-enter {           // 类名:初始化状态
      opacity: 0;
    }
    </style>
    复制代码

    自己画了一个过渡动画生命周期,表示:动画开始,过程,结束,类名生效和失效

    image.png

    隐藏到显示,显示到隐藏过程

    image.png

    css动画

    <div>
      <button @click="show = !show">show toggle</button>
      <transition name="fade">  //fade 自定义名称
        <p v-if="show">hello</p>
      </transition>
    </div>
    
    <style>
    .fade-enter-active {        //类名:隐藏到显示过程所需要的时间
      animation: bounce-in .5s;
    }
    .fade-leave-active {        //类名:显示到隐藏过程所需要的时间
      animation: bounce-in .5s reverse;     //reverse表示和隐藏到显示动画相反
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
    </style>
    复制代码

    我们也可以自定义类名

    <div>
      <button @click="show = !show">show toggle</button>
      <transition enter-class="fadeEnter" enter-active-class="fadeActive" >  //fade 自定义名称
        <p v-if="show">hello</p>
      </transition>
    </div>
    
    <style>
    .fadeActive{     
      transition: opacity .5s;      //类名:隐藏到显示过程所需要的时间
    }
    .fadeEnter {           // 类名:初始化状态
      opacity: 0;
    }
    </style>
    复制代码

    学到这里,我们其实也可以可以引用第三方库来实现这效果,Animate.css

    // 在index.html文件下引入Animate.css
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    // 在组件内
    <div>
      <button @click="show = !show">show toggle</button>
      <transition  
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight" >
        <p v-if="show">hello</p>
      </transition>
    </div>
  • 相关阅读:
    数据结构:静态查找表
    数据结构:二叉查找树(C语言实现)
    自创open vp n windows步骤
    web application 访问控制
    postman trigger xdebug session in phpstorm
    sql查询学习和实践点滴积累
    如何写一个能在gulp build pipe中任意更改src内容的函数
    使用Virtual Audio Cable软件实现电脑混音支持电脑录音
    webpack学习笔记丁点积累
    centos 7.2 Apache+mysql+php step by step备忘
  • 原文地址:https://www.cnblogs.com/web-chuanfa/p/9304781.html
Copyright © 2020-2023  润新知