ccs3 transform,transition,animation了解下

1. 找插件
2. 找不到的話自己用java/object-c/swift封裝插件

這是PHP？
我一個菜逼前端 BB一句？
是不是 $this 指向的問題？

@donglegend 你好，謝謝，基本上可以，但是這種方式感覺有缺陷，如下：

//假設(shè)我想在1s中完成動畫（滑動250px）
//那么我需要函數(shù)執(zhí)行多少次呢？
//很顯然，如果我想動畫看上去越順滑，那必須每次移動的像素就越小，所以函數(shù)執(zhí)行越頻繁；
//相反，如果函數(shù)間隔時間越大，動畫會非常難看（一次移動的像素太多）

問題：假設(shè)我滑動的距離足夠大（1000px），執(zhí)行的時間足夠短（0.3s），看上去動畫要足夠順滑（每次移動5px），那么函數(shù)需要多長時間執(zhí)行一次呢？ 。0.3 / (1000 / 5) ，0.3s要執(zhí)行200次函數(shù)，每 0.0015s 執(zhí)行一次，這么頻繁的執(zhí)行函數(shù)到底有沒有問題呢？如果每次只能移動1px呢？

再者就是這些計算麻煩，不如css3動畫來得方便。

我用css實現(xiàn)的動畫和js鉤子實現(xiàn)的作比較，都是0.3s，總感覺css的動畫要快，要順滑。

<template>
    <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
    >
        <slot></slot>
    </transition>
</template>
<script>
export default {
    name: 'animation',
    data() {
        return {
            enterTimer: null,
            leaveTimer: null
        }
    },
    methods: {
        beforeEnter: function(el) {
            //設(shè)置滑塊的初始位置（滑塊的寬度）
            el.style.bottom = '-250px'
        },
        enter: function(el, done) {
            clearInterval(this.leaveTimer)
            let _v = 0
            //假設(shè)我想在1s中完成動畫（滑動250px）
            //那么我需要函數(shù)執(zhí)行多少次呢？
            //很顯然，如果我想動畫看上去越順滑，那必須每次移動的像素就越小，所以函數(shù)執(zhí)行越頻繁；
            //相反，如果函數(shù)間隔時間越大，動畫會非常難看（一次移動的像素太多）
            this.enterTimer = setInterval(() => {
                if (_v < 250) {
                    _v += 2.5
                } else {
                    _v = 250
                    clearInterval(this.enterTimer)
                    done()
                }
                el.style.opacity = _v
                el.style.transform = `translateY(-${_v}px)`
            }, 3)
        },
        leave: function(el, done) {
            clearInterval(this.enterTimer)
            let _v = 250
            this.leaveTimer = setInterval(() => {
                if (_v > 0) {
                    _v -= 2.5
                } else {
                    _v = 0
                    clearInterval(this.leaveTimer)
                    done()
                }
                el.style.opacity = _v
                el.style.transform = `translateY(-${_v}px)`
            }, 3)
        }
    }
}
</script>

之前一直以為官方價紹了兩種方式是等價的，并且兩種方式對應(yīng)的demo不是等效的，感覺這是巨大的一個坑

在地圖上倒好做了，德高百度啥的直接有現(xiàn)成的接口，設(shè)定路徑就行了。

之前整理過這類問題，請先參考： https://zhuanlan.zhihu.com/p/...

(主要就是嘗試用canvas并且我寫了一個簡單的工具...)

如果還有問題，也歡迎進(jìn)一步交流。

Sublime Text 3 配置瀏覽器預(yù)覽路徑 localhost

src="img[nowIndex].src" 一樣的啊

es6:

  var items = document.querySelectorAll("li");
  for(let i = 0; i<items.length;i++){
    items[i].onclick = function(){
      console.log(i)
    } 
  }

es5:

  var items = document.querySelectorAll("li");
  for(var i = 0; i<items.length;i++){
   (function(i){
        items[i].onclick = function(){
      console.log(i)
    } 
   })(i)
  }

for循環(huán)直接就運(yùn)行了跑了6次，等你點擊的時候i已經(jīng)等于5

axios 的攔截器可以試一下

//添加請求攔截器
axios.interceptors.request.use(config => {
  //在發(fā)送請求之前做某事，比如說 設(shè)置loading動畫顯示
  return config
}, error => {
  //請求錯誤時做些事
  return Promise.reject(error)
})

//添加響應(yīng)攔截器
axios.interceptors.response.use(response => {
  //對響應(yīng)數(shù)據(jù)做些事，比如說把loading動畫關(guān)掉
  return response
}, error => {
  //請求錯誤時做些事
  return Promise.reject(error)
})

可以用v-show+vue過渡動畫，這樣就可以實現(xiàn)

在顯示動畫中，加上動畫延時，這樣就不會出現(xiàn)同步和重疊的情況，
但這樣會有一種情況就是初始化的時候會慢，如果想要解決，還可以初始化后給他們加上一個class，
然后.fade-enter-active.xxxx 兩個class都有就加上動畫延時，transtion-delay，就能解決

this.$nextTick(()=>{

this.$set(......)

})

cocos2d-js

你應(yīng)該把進(jìn)退場動畫放在動態(tài)元素上。

<div *ngFor="let item of projects" [@myanim]>
   ...
</div>

一個想法（實際是不是這樣做的就不知道了）：每次滾動播放一定的幀數(shù)，如果出現(xiàn)連續(xù)滾動則要做防抖動處理，并根據(jù)滾動距離進(jìn)行幀的播放?？淳W(wǎng)站的效果似乎還用了緩動函數(shù)，因為滾動一次的時候從開始到停止并不是很流暢。

原來這個原因：

/**
   * 觸摸小配件中
   */
  partTouchMove: function (e) {
    //獲取當(dāng)前小配件的partTouchData
    //let partTouchData = e.currentTarget.dataset.item.partTouchData;
    //獲取當(dāng)前小配件的id
    let id = e.currentTarget.dataset.item.id;
    let partTouchData = this.data.showDogs[id].partTouchData

把

let partTouchData = e.currentTarget.dataset.item.partTouchData;

改為

let partTouchData = this.data.showDogs[id].partTouchData

完美解決?。?！

可能是通過data-綁定了復(fù)雜數(shù)據(jù)，不斷循環(huán)獲取的時候，會嚴(yán)重影響性能。

使用.bind(this)綁定上下文