zoukankan      html  css  js  c++  java
  • Vue.js动画

    组件的过渡

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

    链接地址下载:

    <script src="http://raw.githubusercontent.com/daneden/animate.css/master/animate.css"></script>
     

    css过渡

    下面是一个运用css点击显示隐藏显示的2s动画效果:

        <style>
            /* 离开进行中和开始进行中,设置了一个透明度的变化*/
            .fade-enter-active,.fade-leave-active{
              transition: opacity 2s;
            }
            /* 开始和结束前的时候,透明度为0,相当于把它给隐藏掉*/
            .fade-enter,.fade-leave-to{
              opacity: 0;
            }
        </style>
        
        <body>
          <div id="main">
            <button v-on:click="ok = !ok">点击</button>
            <transition name="fade">
              <p v-if="ok">vue动画课程</p>
            </transition>
          </div>
        </body>
        
        <script>
          var vm = new vue({
            el: '#main',
            data: {
              ok: true
            }
          });
        </script>

     

    过渡理解

    当使用/删除包含在transition组件中的元素时,Vue将会做的处理:

    • 首先会先嗅探一下这个目标元素是否使用CSS过渡或动画,在使用的时候添加或者删除CSS类名。
    • 如果没有检测到这个CSS过渡或动画,DOM操作(插入或删除)会直接执行下一帧,而不会在这一帧继续执行。

    资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

    过渡动画CSS的类名

    • v-enter,定义进入过渡的开始状态
    • v-enter-active,定义过渡的状态,在元素的整个过渡过程中作用,在元素被插入时生效,在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
    • v-enter-to,定义进入过渡的结束状态,在元素被插入一帧后生效(与此同时v-enter被删除),在transition/animation完成之后移除。
    • v-leave,定义离开过渡的开始状态,在离开过渡被触发时生效,在下一个帧移除。
    • v-leave-active,定义过渡的状态,在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在transition/animation完成之后移除,这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
    • v-leave-to,定义离开过渡前的结束状态,在离开过渡被触发一帧后生效(与此同时v-leave被删除),在transition/animation完成之后移除。
  • 相关阅读:
    Django+drf学习过程笔记
    网络编程之socket
    python回收机制
    异常处理
    面向对象
    常用模块
    部分内置模块
    模块的使用、软件开发目录规范
    迭代器、生成器、函数递归调用及二分式
    三元表达式、生成式、匿名函数
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/14092488.html
Copyright © 2011-2022 走看看