重新触发CSS3 animation和@keyframes定义的动画

结合CSS3的animation和@keyframes可以给元素定义动画,定义一个标题进入的动画如下:

只运行一次动画

scss

@keyframes my-animation {        
  from {
    opacity : 0;
    left : -500px;
  }
  to {
    opacity : 1;
    left : 0;
  }      
}
.run-animation {
  position: relative;
  animation: my-animation 2s ease;
}
#logo {
  text-align: center;
}

@keyframes定义了效果,样式从左侧向右侧移动,由透明变为不透明。animation定义了动画,使用效果my-animation,耗时2秒,渐入。

html

<h1 id="logo" class="run-animation">
  你好(点击重新运行)
</h1>

直接在元素上添加class run-animation,它只会运行一次。

重新运行动画

添加了动画的元素,只会在元素第一次渲染时才会触发动画,如果需要重新动画,需要对元素进行定位操作,步骤如下:

  1. 删除元素已添加的动画class
  2. 对元素做定位操作
  3. 添加原来的动画class

js如下:

var element = document.getElementById("logo");
// 监听触发动画的事件,如click
element.addEventListener("click", function(e){
  e.preventDefault;
  // 1、删除动画的class
  element.classList.remove("run-animation");
  // 2、改变元素的offsetWidth
  element.offsetWidth=element.offsetWidth;
  // 3、重新添加动画的class
  element.classList.add("run-animation");
}, false);

需要注意的是再严格模式下,element.offsetWidth=element.offsetWidth是不生效的,替代方案:

void element.offsetWidth

 

 

 

 

版权声明:著作权归作者所有。

相关推荐

Netty 4.1.47.Final 发布,修复WINDOW_UPDATE_FRAMEs未刷新严重bug

距离上一次发布仅 1.5 周,Netty 4.1.47.Final又发布了一个版本。此版本主要解决了可能由于未刷新 WINDOW_UPDATE_FRAMEs 从而导致HTTP/2 流过时的问题。该 bug 非常严重,所以开发团队尽快地发布了此版本。主要更新内容包括:确保总是在 Abstract Http2Stream Channel 中刷新窗口更新帧macOS 上处于类路径上时,需要使用 MacO

JavaScript定义使用类和对象Object的方法

在JavaScript里定义Object有三种方式:对象常量,使用object的构造器定义,以及使用class定义。方式一、对象常量使用对象常量的方式是很直接的,直接在定义对象的属性及方法即可,如下:const bird = { name: 'Joe', numWings: 2, numLegs: 2, numHeads: 1, fly(){}, chirp(){}, eat(){}

使用RecyclerView和LayoutAnimation给列表添加进入动画

这里讲解下使用RecyclerView和LayoutAnimation给列表添加进入动画。分为三个步骤:给列表项添加动画使用列表项的动画定义LayoutAnimationRecyclerView应用LayoutAnimation的动画使用LayoutAnimation定义动画的好处是,它是单独定义,可以应用于任何ViewGroup的子类。这里是以RecyclerView为示例。示例效果示例是一个向

使用laptop脚本搭建macOS的web和移动开发环境

搭建开发环境往往是很痛苦的事,在github上有一个laptop的开源项目,它实际上是一个脚本,它集成了在macOS上搭建web或移动开发的一些工具。项目地址:https://github.com/thoughtbot/laptopmac版本支持目前它已测试支持的macOS版本包括:macOS Mavericks (10.9)macOS Yosemite (

Kotlin:类的定义

基本定义Kotlin使用关键词class定义类,如:class User { } 声明类主要包括三部分:类名:必选,类的名称,一般以大写字母开头。类头:可选,类头包括type parameter(如泛型),主构造(primary constructor)等。类体:可选,在Kotlin,类体是可选的,它有大括号{}括起来。类头和类体是可选的,一个最简单的类可

TypeScript:接口(interface)属性的定义

  在TypeScript里,接口扮演了一个定义数据结构的角色,它在TypeScript的类型检查中起到很重要的作用。基本用法匿名定义sayHello(person: {name:string}) { console.log(person.name + ", 您好!"); } 这是一个很简单的例子,它使用匿