Question

如果您点击“搜索工具”＆＃39;当谷歌搜索某些东西时，它会在它下方的东西上做一些动画;

我试图做同样的事情，但我不知所措。这是我的测试人员：http://plnkr.co/edit/8WdFwWbfHvgpGrzqs5Cb?p=preview

这是我目前对传播的尝试：

/* when hiding the thing */
.ng-hide-add         { 
  -webkit-animation:0.5s lightSpeedOut ease; 
  animation:0.5s lightSpeedOut ease; 
}

/* when showing the thing */
.ng-hide-remove      { 
  -webkit-animation:0.5s flipInX ease; 
  animation:0.5s flipInX ease; 
}

/* ANIMATIONS (FROM ANIMATE.CSS) */

/* flip in */
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform:  rotateX(0deg);
    transform:  rotateX(0deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }


  100% {
    -webkit-transform:  rotateX(90deg);
    transform:  rotateX(90deg);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: rotateX(90);
    -ms-transform: rotateX(90);
    transform: rotateX(90);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }

  100% {
    -webkit-transform: rotateX(0);
    -ms-transform: rotateX(0);
    transform: rotateX(0)
  }
}

/* light speed out */
@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

任何想要尝试并且接近的人，一个简单的分享将不胜感激

Answer 1

不确定这是否是您正在寻找的，但我写了一个简单的jQuery切换来完成这项工作。我不知道你是否打算让你的文本选项像你在你的例子中那样向右滑动，但是检查googles的“搜索选项”按钮，它们在结果数量和搜索选项本身之间上下切换，这样就可以了我创造了什么。如果你想要不同的东西，你需要更详细地描述它！

无论如何，jsFiddle：https://jsfiddle.net/rj2w91x2/1/

HTML：

<div>
    <ul id='list-one'>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <ul id='list-two'>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</div>
<div>
    <button id="btn">Toggle</button>
</div>

CSS：

div {
    height: 60px;
}
#list-one {
    list-style: none;
}
#list-one li {
    display: block;
    float: left;
    padding: 5px 10px;
}
#list-two {
    display: none;
    list-style: none;
}
#list-two li {
    display: block;
    float: left;
    padding: 5px 10px;
}

jQuery的：

$("#btn").click(function () {
    $('#list-one').slideToggle();
    $('#list-two').slideToggle();
});

您可以在小提琴上看到行为，只需点击“切换”按钮即可。动画有点跳跃，我认为只是一个造型问题（为了简单起见，几乎没有任何风格）。

这在纯JS / CSS3中是可行的，但是因为你正在使用JS，为什么要让事情变得更难？

css动画，如谷歌搜索工具＆＃39;

1 个答案: