使用外部按钮控制 CSS 变换？答案

【问题标题】：Controlling CSS Transform with an external button?使用外部按钮控制 CSS 变换？
【发布时间】：2011-12-12 18:52:12
【问题描述】：

需要帮助按钮上的 javascript 来触发这些转换，如滑块 1、2、3 和来回交替。就像苹果网站上的 iPhone 功能滑块一样。有人吗？

HTML：

<div id="anima-slide1">
  <div class="anima-text-slide1">Genuinity comes at a price.<br>
    <font color="#f06">Will you pay it?</font></div>
  <div class="anima-image-slide1"><img src="img/lowrider1.png" width="250" height="250"> </div>
</div>

<div id="anima-slide2">
  <div class="anima-text-slide2">Genuinity comes at a price.<br>
    <font color="#f06">Will you pay it?</font></div>
  <div class="anima-image-slide2"><img src="img/lowrider1.png" width="250" height="250"> </div>
</div>

<div id="anima-slide3">
  <div class="anima-text-slide3">Genuinity comes at a price.<br>
    <font color="#f06">Will you pay it?</font></div>
  <div class="anima-image-slide3"><img src="img/lowrider1.png" width="250" height="250"> </div>
</div>

CSS：（2 和 3 相同）

.anima-text-slide1 {
    margin-top:10px;
    position:absolute;
    font-family: 'BebasRegular';
    color:#FFF;
    font-size:40px;
}
.anima-text-slide1 {
    -webkit-backface-visibility: visible;
    -webkit-transition: 900ms ease;
    opacity: 0;
    -webkit-transform: translate(-497px, 0px) rotate(0deg);
}
.anima-image-slide1 {
    position:absolute;
    left: 610px;
    top: 0px;
}
.anima-image-slide1 {
    -webkit-backface-visibility: visible;
    -webkit-transition: 900ms ease;
    opacity: 0;
    -webkit-transform: translate(497px, 0px) rotate(0deg);
}

【问题讨论】：

你能澄清一下你想要做什么吗？
我希望在单击按钮时进行 CSS 转换。就像一个 JQuery 滑块，但使用 css 而不是幻灯片来来去去，我想要动画来来去去。使用下一个和上一个按钮，您可以浏览各种动画幻灯片。像这样的东西：apple.com/iphone

标签： javascript css slider css-transforms

【解决方案1】：

通过添加类名，您可以创建多个动画步骤。使用 jQuery 可以更轻松地更改目标元素上的类名。您可以将此技术应用于您的特定情况。

<div class="container">
Hello
</div>

<a href="javascript://" onclick="setFrame('frame1')">Frame 1</a>
<a href="javascript://" onclick="setFrame('frame2')">Frame 2</a>

JS：

function setFrame(frameName) {
    $('.container').addClass(frameName);
}

CSS：

.container {
     font-size:24px;   
}    
.frame1 {
    font-size:48px;
    -webkit-backface-visibility: visible;
    -webkit-transition: 900ms ease;
    opacity: 20;
    -webkit-transform: translate(200px, 0px) rotate(0deg);
}
.frame2 {
    font-size:64px;
    color:#ff0000;
    -webkit-backface-visibility: visible;
    -webkit-transition: 900ms ease;
    opacity: 20;
    -webkit-transform: translate(0px, 150px) rotate(30deg);
}

编辑：

所以如果你想做多个元素，你可以这样做：

.containerA .frame1 {
... 
} 

.containerB .frame1 {
...some different style... 
}

然后：

   function setFrame(frameName) {
        $('.containerA').addClass(frameName);
        $('.containerB').addClass(frameName);
    }

【讨论】：