CSS動畫效果的回調

時間 2019-11-16

標籤 css 動畫效果欄目 CSS 简体版

原文原文鏈接

用純JS實現動畫效果代碼量大,計算複雜.所以如今前端頁面的動畫效果通常都採用CSS來實現.css

CSS動畫實現簡單高效,可是在處理動畫,控制動畫過程上卻缺乏一些有效手段.前端

例如咱們想在動畫效果完成時調用回調函數來處理一些事務,會發現CSS並無提供直接的方法來讓咱們使用.web

一.css動畫簡介

css動畫效果有兩種,即過渡和動畫.函數

1.過渡

當元素從一種樣式轉變爲另外一種樣式,咱們爲這種轉變添加動畫效果,這種效果就稱做過渡.動畫

CSS的過渡是經過 transtion 屬性實現的.this

transtion屬性必須包含如下兩個值:spa

要添加過渡效果的樣式屬性名
過渡效果持續時間

另外還有兩個可選的屬性值:code

過渡效果的速度時間曲線函數
過渡效果的延遲時間

下面是一個CSS過渡效果的例子:orm

   div{
      width: 100px;
      transition: width 2s;
      -webkit-transtion:width 2s;
    }
    div.hover{
      width: 300px;
    }

當鼠標移動到此div上時,此div寬度會增長200px.blog

咱們爲寬度添加上 2s 過渡效果.最後效果以下:

2.動畫

在實現比較複雜的動畫時,單純使用過渡已經沒法達到目的,能夠選擇使用CSS的animation屬性來定義動畫效果.

要想使用animation屬性,咱們必須先了解一下CSS3加入的@keyframes規則.

@keyframes規則用於建立動畫,能夠從動畫運動狀態的幀來定義動畫.

以下即@kayframes定義動畫的例子:

@keyframes show
{
    from {color: red;}
    to {color: yellow;}
}

@-webkit-keyframes show /* Safari 與 Chrome */
{
    from {color: red;}
    to {color: yellow;}
}

經過@keyframes咱們能夠定義動畫從開始到結束的樣式變化 .

咱們也能夠經過定義動畫效果的百分比狀態來定義動畫樣式,以下

@keyframes show
{
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: blue;}
    100% {color: green;}
}

@-webkit-keyframes show /* Safari 與 Chrome */
{
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: blue;}
    100% {color: green;}
}

在使用@keyframes定義了動畫效果以後,咱們能夠經過 animation 來將動畫效果綁定到元素,以下:

div:hover{
   animation:show 5s;
}

具體效果以下:

動畫文字

鼠標移動其上便可看到動畫效果

以上就是CSS動畫的簡單介紹,另外CSS3還添加了transform屬性,用於2D和3D轉換,也被常常用來做爲動畫使用.

二.CSS動畫的回調函數

像以上的CSS動畫,若是想使用回調函數來控制動畫完成後的事務處理,是比較麻煩的.

一.延時函數

不少人使用JS的延時函數 setTimtout() 來解決CSS動畫的回調問題,相似以下的代碼:

setTimtout(function(){
     dosomething()  //動畫的回調函數
     }, delaytime);      //動畫的持續時間

可是這種方法因爲並非真正意義的回調,會形成如下幾個問題:

因爲動畫和延時函數並不必定是同一時間開始,致使函數和動畫不一樣步
會形成JS代碼和CSS代碼相互關聯耦合,修改和維護比較麻煩
存在多個動畫須要回調時會形成代碼混亂和臃腫
在多個動畫效果同時結束時會引發回調函數衝突

所以,不建議使用延時函數做爲動畫的回調函數.

二.JS事件

其實,JS提供了兩個事件,能夠完美的解決動畫的回調函數問題,那就是 transtionend 和 animationend,當動畫完成時,即會觸發對應的事件.

咱們能夠經過這兩個事件輕鬆優雅的爲動畫添加回調函數.

具體用法以下:

transtionend

document.getElementById("myDIV").addEventListener("transitionend", myFunction); //myFunction即爲動畫回調函數

animationend

document.getElementById("myDIV").addEventListener("animationend", myFunction); //myFunction即爲回調函數

咱們經過如下這個例子來體驗這兩個事件的具體使用:

<style>
  div#test
{
  width:100px;
  height:100px;
  background:red;
  transition:width 2s;
  -webkit-transition:width 2s; /* Safari */
}

div#test:hover
{
  width:300px;
}
</style>
</head>
<body>
<div id="test">&nbsp;</div> 
<script>
document.getElementById("test").addEventListener("transitionend", myFunction);
function myFunction() {
    this.innerHTML = "回調函數觸發div變爲粉色";
    this.style.backgroundColor = "pink";
}
</script>

效果以下:

固然也可使用Jquery庫的動畫回調函數,很簡單,代碼相似以下,

   $("#item").animate({height:"200px"}, function() {
        alert("hello");
    });

以上就是關於CSS動畫回調函數的一些知識,但願對你有幫助.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。