zoukankan      html  css  js  c++  java
  • vue2.0过度动画

    vue在插入、更新或移除dom时,提供了多种不同方式的应用过度效果。

    包括以下工具:

      在css过渡和动画中自动应用class.

      可以配合使用第三方css动画库,如animate.css

      在过渡钩子函数中使用javascript直接操作DOM

      可以配合使用第三方javascript动画库,如Velocity.js

    一、单元素/组件的过渡

    Vue提供了transition的封装组建,在下列情形中,可以给任何元素和组建添加进入/离开过度

      条件渲染(使用if)

      条件展示(使用v-show)

      动态组建

      组件根节点

    .cart-decrease{
    opacity:1;
    transform:translate3D(0,0,0);
    &.move-enter-active{
    opacity:1;
    transform:translate3D(0,0,0);
    transition:0.5s all;
    }
    &.move-enter{
    opacity:0;
    transform:translate3D(24px,0,0);
    }
    &.move-leave{
    opacity:1;
    transform:translate3D(0,0,0);
    }
    &.move-leave-active {
    opacity:0;
    transform:translate3D(24px,0,0);
    transition:0.5s all;
    }

    元素进入动画从enter到enter-active,离开动画从leave到leave-active,
  • 相关阅读:
    JVM参数配置
    域渗透命令
    相对路径绝对路径
    ESPCMS的CSRF添加管理员账号
    nmap脚本nse的使用
    Nmap简单的漏扫
    MS08-067
    lcx用法
    给自己的服务器传文件 转自别人
    突破大文件上传 和内网ip的端口转发
  • 原文地址:https://www.cnblogs.com/learnings/p/8963741.html
Copyright © 2011-2022 走看看