animate和过度动画同时使用.html

1将animate和过度动画的类名添加到transition对应的类上

2appear  设置初始样式(页面刷新样式)appear-active-class

3type设置动画时间依据类型(transition或animate)

4可以通过:duration来设置动画时间,补充3

 <style>
    .fade-enter,.fade-leave-to{
      opacity: 0;
    }
    .fade-enter-active,.fade-leave-active{
      transition: opacity 1s;
    }
  </style>
</head>
<body>
  <!--
    过程如下:
     显示  fade-enter,fade-enter-active      fade-enter-active,fade-enter-to     空
     隐藏  fade-leave,fade-leave-active      fade-leave-active,fade-leave-to     空
  -->
  <div id="root">
    <transition name=‘fade‘
      appear
      appear-active-class=‘animated tada‘
      enter-active-class=‘animated tada fade-enter-active‘
      leave-active-class=‘animated rubberBand fade-leave-active‘
    >
      <h1 v-show=‘show‘>
        最是年少时模样
      </h1>
    </transition>
    <button @click=‘change‘>切换</button>
  </div>
  <script>
    var vm=new Vue({
      el:‘#root‘,
      data:{
        show:true
      },
      methods:{
        change:function(){
          this.show=!this.show;
        }
      }
    })
  </script>
</body>

原文地址:https://www.cnblogs.com/em2464/p/12335224.html

时间: 2024-10-26 09:32:57

animate和过度动画同时使用.html的相关文章

Swift 关闭视图的过度动画 eg:CollectionView ,TableView

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Menlo; color: #1e9421; background-color: #ffffff } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Menlo; color: #3e1e81; background-color: #ffffff } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; fo

vue2.0过度动画

vue在插入.更新或移除dom时,提供了多种不同方式的应用过度效果. 包括以下工具: 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库,如animate.css 在过渡钩子函数中使用javascript直接操作DOM 可以配合使用第三方javascript动画库,如Velocity.js 一.单元素/组件的过渡 Vue提供了transition的封装组建,在下列情形中,可以给任何元素和组建添加进入/离开过度 条件渲染(使用if) 条件展示(使用v-show) 动态组建 组

CSS--使用Animate.css制作动画效果

一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHu

Adobe edge animate制作HTML5动画可视化工具(一)

Edge Animate for mac是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.在之后的文章中,我会逐一的介绍这款新的HTML5动画神器.这篇文章先说一说如何把Edge Animate制作的HTML5动画作品嵌入到Wordpress中. Adobe Edge Animate的目的是帮助专业设计师制作网页动画乃至简单游戏.目前该工具的重点放在动画引擎上,将增加更多HTML5功能,比如Canvas.HTML5音频/视频标签等.支持An

CATransition 过度动画

1.创建    CATransition * transition =  [CATransition animation];        transition.duration = 2; 2.设置过度样式    transition.type = kCATransitionMoveIn; //控制动画样式,    transition.subtype = kCATransitionFromTop; //控制方向 3.添加动画    [self.changeView.layer addAnima

【Android】你知道还可以通过 View.animate() 来实现动画么

这次想来讲讲 View.animate(),这是一种超好用的动画实现方式,用这种方式来实现常用的动画效果非常方便,但在某些场景下会有一个坑,所以这次就来梳理一下它的原理. 基础 首先,先来看一段代码: mView.animate().sacleX(1.2f).scaleY(1.2f).alpha(0.5f).setDuration(1000).start(); 可以有些人还没接触过这个,但并不妨碍首次理解上述代码.单从方法名上来看,上述代码就是一个实现了持续 1s 的放大 & 透明度结合的动画,

css3 制作平滑过度动画

-webkit-transition(属性渐变) -webkit-transition:CSS属性(none|all|属性)  持续时间  时间函数  延迟时间 CSS属性(transition-property):要变化的属性,比如元素变宽则是width,文字颜色要变色这是color:W3C给出了一个可变换属性的列表:除了以上属性外,还有css3中大放异彩的css3变形,比如放大缩小,旋转斜切,渐变等.该取值还有个强大的“all”取值,表示上表所有属性: 持续时间(transition-dur

vue animate.css训练动画案例 列表循环

制作目标动画:向上入场添加数据,点击数据右滑动离场 简单页面效果: 实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/animate.css"/>

Block 对过度动画的封装

参数1. 要改变的view 参数2. 动画的时长 参数3 动画类型 参数4.    [UIView transitionWithView:self.changeView duration:2 options:UIViewAnimationOptionTransitionFlipFromBottom animations:^{        //要改变的属性        self.changeView.backgroundColor = [UIColor purpleColor];