鍍金池/ 問答/ 動漫問答
幼梔 回答

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

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

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

再者就是這些計(jì)算麻煩,不如css3動畫來得方便。

我用css實(shí)現(xiàn)的動畫和js鉤子實(shí)現(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ù)間隔時(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>

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

情皺 回答

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

溫衫 回答

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

枕邊人 回答

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

何蘇葉 回答

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

壞脾滊 回答

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次,等你點(diǎn)擊的時(shí)候i已經(jīng)等于5

情已空 回答

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

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

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

影魅 回答

這是PHP?
我一個(gè)菜逼前端 BB一句?
是不是 $this 指向的問題?

愛礙唉 回答

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

賤人曾 回答
  1. 找插件
  2. 找不到的話自己用java/object-c/swift封裝插件
小曖昧 回答

原來這個(gè)原因:

/**
   * 觸摸小配件中
   */
  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)獲取的時(shí)候,會嚴(yán)重影響性能。

茍活 回答

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

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

axios 的攔截器可以試一下

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

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