zoukankan      html  css  js  c++  java
  • Vue 动画渲染

    基本流程

       使用<transition>对要执行动画的标签内容进行包裹。

       如果你使用css动画,则该标签应当具有name属性,可以使用name-时机进行链接书写css类。

       如果你使用animate.css等第三方动画效果库,则可直接添加动画属性即可。

    原生CSS

       下面是css类,v对应<transition>name属性。

    时机描述
    v-enter 定义进入过渡的开始状态
    v-enter-to 定义进入过渡生效时的状态
    v-active 定义进入过渡的结束状态
    v-leave 定义离开过渡的开始状态
    v-leave-active 定义离开过渡生效时的状态
    v-leave-to 定义离开过渡的结束状态

      

       vuecss动画

    <style>
        .show-enter,.show-leave-to{
            transition: all 2s;
            opacity: 0;
        }
        .show-enter-active,.show-leave{
            transition: all 2s;
        }
    </style>
    
    <body>
    
    <div id="app">
        <p><button type="button" @click="status = !status">切换</button></p>
        <transition name="show" >
            <img v-if="status" src="./bcakground.jpg" alt="">
        </transition>
    </div>
    
    <script src="./vue.js"></script>
    </script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                status: false,
            }
        })
    </script>
    </body>
    

    第三方库animate

       使用第三方库animate,指定动画类即可

       animate.css官网

    属性描述
    enter-active-class 开始的动画类
    leave-active-class 结束的动画类

       vuecss第三方库动画

    <link rel="stylesheet" href="./animate.css/animate.css">
    <body>
    
    <div id="app">
        <p><button type="button" @click="status = !status">切换</button></p>
        <transition name="show" enter-active-class="animate__animated  animate__bounce" leave-active-class="animate__animated animate__wobble">
            <img v-if="status" src="./bcakground.jpg" alt="">
        </transition>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                status: false,
            }
        })
    </script>
    </body>
    
  • 相关阅读:
    Linux Windows平台添加pip源
    Python redis交互
    Redis redis-trib集群配置
    Linux 加阿里yum源
    阿里云yum源镜像
    Android实战——GreenDao3.2的使用,爱不释手
    一个Demo带你彻底掌握View的滑动冲突
    观察者模式简单理解
    Android Studio插件之MVPHelper,一键生成MVP代码
    城市导航列表
  • 原文地址:https://www.cnblogs.com/Yunya-Cnblogs/p/14015725.html
Copyright © 2011-2022 走看看