CSS3 vs. JavaScript [英] CSS3 vs. JavaScript

问题描述

所以我试图在网页上创建一个动画，并试图找出一种方法使用CSS3，但我很困惑，如何做到这一点。

So I'm trying to create an animation on a webpage and am trying to figure out a way to do it using CSS3, but am quite confused as to how I can do it.

我需要发生的是当用户点击一个链接元素，我想要一个div扩展和填充的内容特定于链接元素点击。例如，当用户点击标题为关于的链接时，链接元素下方的div将会展开，并显示一些内容。然后，当他们点击另一个链接，说联系人时，关于的具体内容将会消失，而联系人的内容将会随着div的大小而显示，以适应新内容。

What I need to have happen is when users click on a link element I want a div to expand and be populated with content specific to the link element clicked. For example, when a user clicks on a link titled "About", a div below the link element will expand and have some content appear. THEN, when they click another link, say "Contact", the content specific to "About" will disappear and content specific to "Contact" will appear as the div re-sizes to fit the new content.

我想我可以很容易地使用Javascript，但是有人可以告诉我，如果它可能更容易做/可能与CSS3？

I think I can do this pretty easily with Javascript, but can someone tell me if it might be easier to do/possible with CSS3?

感谢所有。

推荐答案

如前所述，JavaScript是您最好的朋友。但是，因为你问是否可能与CSS3我不得不尝试。基本上我已经做了，我使用目标选择器来触发动画。因此，当您点击链接时，div会展开一些内容，如果您点击另一个链接，一个新的div（具有一些新内容（位于同一位置））展开，创建的幻觉，它是相同的div展开。

As already mentioned, JavaScript is your best friend for this. But since you asked if it would be possible with CSS3 I had to give it a try. Basically what I’ve done is I’ve used the target selector to trigger the animation. So when you click a link, a div expands with some content and if you click another link a new div, with some new content (positioned in the same place) expands, creating the illusion that it’s the same div expanding.

这不是一个最佳的解决方案，我做了这个例子真的很快，所以它不能正常工作，你想要的，但它给你至少一个如何做的图片只是CSS。

It’s not an optimal solution and I made this example really quick so it’s not working exactly as you wanted, but it gives you at least a picture on how it could be done with just CSS.

希望有所帮助！

这里是 demo ，这里是我的示例代码：

Here's a demo and here's the code from my example:

HTML

<a href="#box">Box</a><br /><a href="#boxtwo">Box two</a>
<div id="box">Hello</div>
<div id="boxtwo">Hello again,</div>

CSS

#box, #boxtwo{
    position: absolute;
    top: 50px;
    left: 50px;    
    width: 0px;
    height: 0px;
    background-color: #e3e3e3;
    color: transparent;    
}

#box:target {
      -webkit-animation: expand 1.0s ease-in forwards;
}

#boxtwo:target {
      -webkit-animation: expand 1.0s ease-in forwards;
}

@-webkit-keyframes expand {
      0%   {width: 0px; height: 0px; color: transaprent;}
      50%  {width: 100px; height: 100px; color: transparent;}
      100% {width: 100px; height: 100px; color: #000000;}
}

这篇关于CSS3 vs. JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！