动画过渡两种方法

1.使用angular+animation实现

  • 在app-module.ts中引入 BrowserAnimationsModule

    1.import { BrowserAnimationsModule} from '@angular/platform-browser/animations';   

    2.imports: [
        BrowserAnimationsModule
      ],
  • 在需要用到的组件中
    1.html文件中[@openClose]="需要判断的值"
    2.ts文件中
    2.1 引入 import {trigger,style,state,animate,transition,keyframes,group} from '@angular/animations';
    2.2 在@Component中输入你需要的过渡动画
    animations:[] 

实例:

 <ul class="childHeight" [@openClose]="isOpen ? 'open' : 'closed'">
     <li>General Elements</li>
      <li>Advanced Elements</li>
      <li>Editors</li>
      <li>Validation</li>
  </ul>
import {trigger,style,state,animate,transition,keyframes,group} from '@angular/animations';
 
@Component({
  animations :[
    trigger('openClose',[
      state('open',style({
          height:'200px',
          width:'100%',
          opacity:1,
        })
      ),
      state('closed',style({
          height:'0px',
          width:'100%',
          opacity:0.5,
      })
      ),transition('open => closed',[
        animate('1s')
      ]),transition('closed => open',[
        animate('1s')
      ])
    ])
  ]
})
  public isOpen:boolean = false;
你需要的点击事件名(){  
this.isOpen = !this.isOpen;
}
 
 
方法2 使用css3+ngclass
  组件html中
  

<ul class="childHeight" [ngClass]="{'formStyle':formall,'formOut':!formall}" > 
      <li>General Elements</li>
      <li>Advanced Elements</li>
      <li>Editors</li>
      <li>Validation</li>
 </ul>
 
scss中
.formStyle{zoom: 1; height: 200px !important;background-color:transparent; transition: 1s ease-in;}
.formOut{height: 0px !important; transition: 1s linear;}

 

ts中
你需要点击事件名(){ 
  this.isOpen = !this.isOpen;
} 

ng的动画过渡的更多相关文章

  1. CSS3之边框样式(动画过渡)

    简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...

  2. css动画过渡

    css动画过渡css代码: .div03{ width:100px;height:100px;background: rebeccapurple;color: #fff; -webkit-transi ...

  3. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  4. CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  5. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡

    动画过渡(Transitions) 这一小节我们先来讲“动画过渡(Transitions)”这个插件的使用,源文件:transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡 ...

  6. 动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView

    动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView 效果如下: BlackAndWhiteView.h 与 BlackAndWhiteView.m // // BlackAndWhi ...

  7. 动画--过渡延迟时间 transition-delay

    transition-delay属性和transition-duration属性极其类似,不同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay ...

  8. 动画--过渡所需时间 transition-duration

    transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间. 案例演示: 在鼠标悬停(hover)状态下,让容器从 ...

  9. 动画--过渡属性 transition-property

    早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更 ...

随机推荐

  1. 十三道Python练习题

    一.完美立方 编写一个程序,对任给的正整数N (N≤100),寻找所有的四元组(a, b, c, d),使得a^3= b^3 + c^3 + d^3,其中a,b,c,d 大于 1, 小于等于N. 输入 ...

  2. Java学习——单元测试JUnit

    Java学习——单元测试JUnit 摘要:本文主要介绍了什么是单元测试以及怎么进行单元测试. 部分内容来自以下博客: https://www.cnblogs.com/wxisme/p/4779193. ...

  3. Django框架操作数据库的两种方式

    Django操作数据库的前提操作是成功连接数据库,详情见上篇:https://www.cnblogs.com/kristin/p/10791358.html Django查询数据库的方式一 from ...

  4. Mysql时区无法识别

    Unable to connect to database. Tried 1 times {:error_message=>“Java::JavaSql::SQLException: The s ...

  5. 【分布式搜索引擎】Elasticsearch之安装Elasticsearch可视化平台Kibana

    一.Kibana简单介绍 Kibana 是为 Elasticsearch设计的开源分析和可视化平台.你可以使用 Kibana 来搜索,查看存储在 Elasticsearch 索引中的数据并与之交互.你 ...

  6. odoo10学习笔记十:Actions

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189319.html actions定义了系统对于用户的操作的响应:登录.按钮.选择项目等. 一:窗口ac ...

  7. 爬虫---Beautiful Soup 爬取图片

    上一篇简单的介绍Beautiful Soup 的基本用法,这一篇写下如何爬取网站上的图片,并保存下来 爬取图片 1.找到一个福利网站:http://www.xiaohuar.com/list-1-1. ...

  8. Visual Studio的UTF-8问题

    参考:https://www.jianshu.com/p/c51cbb2f20e1 一.在“工具”菜单找到“自定义”,然后按照图示操作. 二.选择“编码”.

  9. 201871010108-高文利《面向对象程序设计(java)》第十一周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ht ...

  10. 微信小程序,知识点

    对于小程序的授权,只要用户授权一次,该授权关系就会记录在后台,除非删除小程序,或者用户在设置中关闭该授权. 官方文档: https://developers.weixin.qq.com/minipro ...