简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 关于css transition过渡的问题
怪我咯
怪我咯 2017-04-11 11:26:13
0
4
369

有一个p元素有transition的样式
需要从a位置移动到b位置，再移动到c
例如top:10px -> top:20px ->top:30px
我想在a到b的过程中没有过渡，然后b到c才有过渡

可以怎么实现？
我试过先取消样式将元素移到B，再添加样式，然后移到C，但是不行，A到B一样有过渡。

怪我咯
怪我咯

走同样的路，发现不同的人生

全員に返信(4)
黄舟
黄舟2017-04-11 11:28:13 4棟

a至b ，给元素加上class b，b至c ，给元素加上class c ，和你想要的transition

いいねを押す +0
返信を追加
Peter_Zhu
Peter_Zhu2017-04-11 11:28:13 3棟

这个得配合js实现，直接用css不能做到吧

いいねを押す +0
返信を追加
小葫芦
小葫芦2017-04-11 11:28:13 2棟

我觉得用animation更容易实现功能，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>长得帅是我的错吗</title>
  </head>
  <style media="screen">
    .box{
      width: 200px;
      height: 200px;
      background: pink;
      position: absolute;

    }
    .box{
      animation:trans 2s  infinite;
    }
    @keyframes trans{
      0%{
        top:0px;
      }
      49%{
        top:0px;
      }
      50%{
        top:100px;
      }
      100%{
        top:200px;
      }
    }
  </style>
  <body>
    <p class="box">
      没想到我是个粉色控，我爱小萝莉？
    </p>
  </body>
</html>
いいねを押す +0
返信を追加
PHPzhong
PHPzhong2017-04-11 11:28:13 1棟

如果不介意使用 jQuery 的 animate() ，可以挺輕鬆的實現

$('.circle')
.animate({
    top: 30
}, 1)
.animate({
    top: 60
}, {
    duration: 1000,
    easeing: "easein"
})
.animate({
    top: 100
}, {
    duration: 1000,
    easeing: "easein"
})

實現

jsFiddle

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！