web-animations

0熱度

1回答

This website有一個很棒的動畫地圖，顯示了塞倫蓋蒂角馬的遷徙模式。不幸的是，他們使用Flash來動畫他們的地圖。我想知道是否有替代方案可以用Javascript做類似的事情。我找到了一個名爲Two.js的插件，但是文檔並不是很好，而且對於我需要的東西似乎有點矯枉過正。有誰知道有任何好的資源或例子，他們可以請我聯繫？

3熱度

2回答

創建過渡的角度2/4

更改屬性時，我想，每當我更改屬性的值來創建一個過渡效果。我試着做以下 @Component({ selector: 'image-holder', template: ` <div class="carousel-image"> <img src="{{ image }}" [@slideInRight]="slide" /> <spa

1熱度

1回答

角度4動畫狀態變化

我有一個動畫應用到兩個div來動畫它們進出虛空狀態。參見：https://plnkr.co/edit/uCdBafYG7NZxVVppiTpo?p=preview HTML： <div *ngIf="shown" [@flipEnterExitAnimation]="state"> <div style="border: 1px solid black">Front</div>

0熱度

1回答

如何讓紙張菜單按鈕正常工作？

我不斷地收到錯誤，抱怨在本地服務下面的演示時無法運行動畫。 Although it does work in my jsBin。 http://jsbin.com/kadugokade/edit?html,console,output <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewp

0熱度

1回答

使用網頁動畫api獨立動畫變換屬性

是否可以在一個動畫中獨立地爲transform屬性的不同部分設置動畫效果？例如： const lineAnimation = [ { transform: 'scaleX(0)', offset: 0 }, { transform: 'translateX(0%)', offset: 0 }, { transform: 'translateX(0%)', offs

1熱度

4回答

如何檢測由CSS3動畫或Web動畫API所做的更改？

如何檢測由css3動畫或網頁動畫（Element.animate）所做的更改？（對不起，我的英文不好！這是我在＃1的第一個問題）我知道MutationObserver，它只是如果我改變內嵌樣式或者如果我使用requestAnimationFrame（因爲我用它更改內聯樣式）響應。但是如果我使用css3動畫或Web動畫，MutationObserver不會響應，因爲它們不會更改內聯樣式。看到這

1熱度

1回答

角度4組件響應動畫

我正在開發一個角度響應應用程序，它在移動設備上有一個抽屜。我喜歡Angular的Web動畫API實現，但我找不到可以根據我的媒體查詢斷點配置動畫的地方。我只能通過我的css工作表取消動畫，但是這使我開始在我的項目中的不同地方分發代碼，我不確定這是什麼角度打算給我做。 .. 活生生的例子我的應用程序抽屜使用此代碼動畫 <div class="mobile-menu" [@animateDraw

1熱度

2回答

重寫網頁動畫設置的樣式api

我正在使用網頁動畫api將div設置爲特定高度。我正在使用填充模式'轉發'來保存動畫後的高度。然而，後來我想通過CSS手動設置高度返回到「自動」，但通過設置填充模式轉發，似乎阻止了CSS在動畫完成後影響高度屬性的能力，即使我將其設置爲開啓元素。我不能在動畫播放後立即將高度設置回自動，所以我想知道是否有一種方法可以覆蓋fill'forwards'設置的屬性？

0熱度

1回答

如何添加一個onclick函數到一個按鈕在河馬動畫師

我不知道你是否熟悉河馬動畫師 ..這個軟件可以很容易地創建網頁動畫，基本上你可以添加html按鈕等。現在我已經添加了一個按鈕，並且在它的屬性中我需要添加一個點擊功能，以便每當用戶點擊它時，它都應該重定向到另一個站點位置。我嘗試了好幾種方式，如這一個： location.href = "www.yoursite.com"; 但是，一個錯誤出現，上面寫着：變量位置找不到。請注意，我不能嘗試do

0熱度

1回答

如何在Angular 2中執行無限動畫？

基本上，我想利用角度（當前爲4）的web動畫api polyfill在元素上執行無限動畫。讓我們來看看一個基本的無棱角例如： var ball = document.getElementById('ball'); ball.animate([ { transform: 'scale(0.5)' }, { transform: 'scale(1)' }