css 动画像 google 的 'Search tools'

Question

如果您在谷歌搜索某些内容时单击 'Search tools'，它会在其下方的内容上显示一些动画；

我也试过做同样的事情，但我很笨。这是我的测试插件：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 'Search options' 按钮它们会在结果数量和搜索选项本身之间上下切换，所以这就是我创造的。如果您想要不同的东西，您需要更详细地描述它！

无论如何，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();
});

您可以在 fiddle 上看到行为，只需单击 'Toggle' 按钮即可。动画有点跳动，我认为这只是一个样式问题（为了简单起见几乎没有设置任何样式）。

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

css 动画像 google 的 'Search tools'

css animation like google's 'Search tools'

css

angularjs

animate.css