V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
CSGO
V2EX  ›  问与答

CSS3 动画 animation 使用方法求问

  •  
  •   CSGO · 2018-10-22 18:50:41 +08:00 · 1677 次点击
    这是一个创建于 2205 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有没办法让点击一个 div,来执行另一个 div 的动画? 比如我建立两个 box,一个 box1,一个 box2,box1 比如是按钮。box2 比如是一个菜单。默认 box2 菜单是 height: 0px,看不见,点击 box1 后,box2 的 height: 0px 变成 400px,就能看到点击 box1,box2 打开的效果。但是不是很理解这个是怎么用。

    比如:

    <style> .box1 { width: 50px; height: 50px; background-color: aqua; position: absolute; right: 10px; top: 5px; } .box2 { width: 100%; background-color: aqua; position: absolute; top: 60px; height: 0px; animation: animation 1s; } @keyframes animation { 0% { height: 0px; } 100% { height: 400px; } } .box1:active{ //执行 animation 动画 } </style>

    12 条回复    2018-10-23 08:16:55 +08:00
    CSGO
        1
    CSGO  
    OP
       2018-10-22 18:52:10 +08:00
    azh7138m
        2
    azh7138m  
       2018-10-22 19:17:45 +08:00
    Pudge1337
        3
    Pudge1337  
       2018-10-22 19:27:00 +08:00 via Android
    为何不用 js
    CSGO
        4
    CSGO  
    OP
       2018-10-22 19:32:46 +08:00
    @Pudge1337 还没学 js
    rabbbit
        5
    rabbbit  
       2018-10-22 19:50:24 +08:00

    局限性很大
    sxy62016
        6
    sxy62016  
       2018-10-22 20:03:09 +08:00 via Android
    点击可以用 checkbox 的 checked 属性实现
    wly19960911
        7
    wly19960911  
       2018-10-22 20:07:19 +08:00
    @Pudge1337 js 写好动画比 css 要难一点。
    rabbbit
        8
    rabbbit  
       2018-10-22 20:38:11 +08:00
    checked 还能这么用,长见识了
    CSGO
        9
    CSGO  
    OP
       2018-10-22 22:29:00 +08:00
    @rabbbit 图片看不了呢
    Sparetire
        10
    Sparetire  
       2018-10-23 01:45:41 +08:00 via Android
    label+checkbox+兄弟元素选择器,隐藏掉 checkbox
    CSGO
        11
    CSGO  
    OP
       2018-10-23 02:06:32 +08:00 via Android
    @rabbbit wow!太高阶了,完全看不懂,只好先拿来用了。
    lraining
        12
    lraining  
       2018-10-23 08:16:55 +08:00 via Android
    $(#box1).click(function(){
    $(#box2).animate({height:400},'slow','easeOutSine',null);
    });
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5506 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 08:41 · PVG 16:41 · LAX 00:41 · JFK 03:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.