CSS3 动画 animation 使用方法求问 - V2EX

Home Sign Up Sign In

This topic created in 2772 days ago, the information mentioned may be changed or developed.

有没办法让点击一个 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 replies • 2018-10-23 08:16:55 +08:00

1

CSGO

OP

Oct 22, 2018

http://imgup.nl/images/2018/10/22/TIM20181022185149.png

2

azh7138m

Oct 22, 2018

https://codepen.io/anon/pen/WaKyVd

只能这个样子了

3

Pudge1337

Oct 22, 2018 via Android

为何不用 js

4

CSGO

OP

Oct 22, 2018

@Pudge1337 还没学 js

5

rabbbit

Oct 22, 2018

局限性很大

6

sxy62016

Oct 22, 2018 via Android

点击可以用 checkbox 的 checked 属性实现

7

wly19960911

Oct 22, 2018

@Pudge1337 js 写好动画比 css 要难一点。

8

rabbbit

Oct 22, 2018

checked 还能这么用,长见识了

9

CSGO

OP

Oct 22, 2018

@rabbbit 图片看不了呢

10

Sparetire

Oct 23, 2018 via Android

label+checkbox+兄弟元素选择器，隐藏掉 checkbox

11

CSGO

OP

Oct 23, 2018 via Android

@rabbbit wow!太高阶了，完全看不懂，只好先拿来用了。

12

lraining

Oct 23, 2018 via Android

$(#box1).click(function(){
$(#box2).animate({height:400},'slow','easeOutSine',null);
});

About · Help · Advertise · Blog · API · FAQ · Solana · 1351 Online Highest 6679 ·

Select Language

创意工作者们的社区

World is powered by solitude

VERSION: 3.9.8.5 · 42ms · UTC 17:04 · PVG 01:04 · LAX 10:04 · JFK 13:04
♥ Do have faith in what you're doing.