zoukankan      html  css  js  c++  java
  • react CSSTransition 参数

    标签包裹的元素会有动画效果

    in 为控制动画开启关闭的“开关”,true为开启,false为关闭
    classNames 为对应的样式类名,和下面的css内的名字对应
    timeout 为动画执行时间
    unmountOnExit 当动画效果为隐藏时,该标签会从dom树上移除,类似js操作
    appear 是否第一次加载该组件时启用相应的动画渲染,css文件中有含有appear的均和此标签相关
    onEntered 入场动画结束时触发的钩子
    onEnter入场动画第一帧时执行
    onEntering当入场动画执行到第二帧时执行
    onExit出场动画第一帧时执行
    onExiting出场动画第二帧时执行
    onExited整个动画出场结束时执行

     css样式

    /*入场动画开始*/
    .fade-enter {
      opacity: 0;
    }
    
    /*入场动画过程*/
    .fade-enter-active {
      opacity: 1;
      transition: opacity 1s ease-in;
    }
    
    /*入场动画结束*/
    .fade-enter-done {
      opacity: 1;
    }
    
    /*离场动画开始*/
    .fade-exit {
      opacity: 1;
    }
    
    /*离场动画过程*/
    .fade-exit-active {
      opacity: 0;
      transition: opacity 1s ease-in;
    }
    
    /*离场动画结束*/
    .fade-exit-done {
      opacity: 0;
    }
    
    /*页面第一次加载时的开始状态*/
    .fade-appear {
      opacity: 0;
    }
    
    /*页面第一次加载时的动画过程*/
    .fade-appear-active {
      opacity: 1;
      transition: opacity 1s ease-in;
    }
  • 相关阅读:
    VC CComboBox用法总结
    WideCharToMultiByte和MultiByteToWideChar函数的用法
    JavaScript
    标题:外星日历
    C语言顺序栈
    C语言循环队列
    每日一题
    标题:李白打酒
    标题:分数
    标题:复数幂
  • 原文地址:https://www.cnblogs.com/dch0/p/12782317.html
Copyright © 2011-2022 走看看