Dart学习笔记(13):Dart和Web技术(Visual Effects)

确切的说,这一章讲的并不是Dart
而是谈论很多的CSS3
特效的运用也就是用到了CSS3中的transition属性而已

所以,如果你想更快的运用Dart,可以跳过此章
当然,我也只是简单的梳理了几个例子

1、Fade

当消息框未显示的时候,点击Show按钮会渐显消息框
当消息框显示的时候,点击Hide按钮会渐隐消息框

核心代码:

.fade-in {
  opacity: 1;
  transition: opacity 1s ease-in;
}

.fade-out {
  opacity: 0;
  transition: opacity 1s ease-out;
}

另外,retainWhere函数表示删除所有的样式,并保留测试函数返回true的样式
如:p.classes.retainWhere((c) => c==’message’);
上面的表达式表示仅保留message样式

2、Flashing

这个效果就是数字“2”不停的变大变小

new Timer.periodic(new Duration(seconds: 1), (_){
    msg.classes.toggle('enlarge');
});

题外话,上面periodic的第二个参数是有参回调函数
(_)的意思大概就是声明参数未使用,即占位符
这是通用的写法,但在Dart中,其实就是普通变量,如:_.toString();

3、Stretch


当鼠标移动到About Us上时,展开菜单
当鼠标移开的时候,收起菜单
这个例子直接就没有提Dart

4、总结

因为项目下面有3个子项目,因此除了引入browser库外
还需要引入path

W3C标准中对CSS3的transition这是样描述的
“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。
这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,
并圆滑地以动画效果改变CSS的属性值。”

语法可以简单的这样记
transition: <属性> <持续时间> <变换速率> <延迟时间>

opacity:0;
transition: opacity 1s ease-in 0s; /*最后的0s是默认值,可以省略*/

大意为在1s的时间内,opacity属性以加速的方式渐变为0

好吧!水了一章,下一章见!

本文出自“Dart语言中文社区”,允许转载,转载时请务必以超链接形式标明文章原始出处
本文地址:
http://www.cndartlang.com/754.html

发表评论

登录后才能评论

评论列表(1条)

  • sherrie
    sherrie 2018年9月4日 下午3:05

    new Timer.periodic这个定时器不知道为什么运行页面会报错。Uncaught Error: RuntimeError: Cannot resolve ‘Timer’.