标签: css-transitions

有没有办法使用的方式-webkit-transition有display？

我使用CSS display来隐藏和显示导航二级...但只display: none和display: block上:hover是一个小联合国性感......一个ease将是巨大的(像-webkit-transition: display 300ms ease-in;)

我知道使用jQuery很容易做到这一点,但我现在正在尝试使用CSS3设置所有内容(我知道:并非所有浏览器都支持它,但这与我目前正在处理的这个项目无关)

这里是一些代码和结构:( li.menu1有一个:hover与section.nav-menu1 {display: block;})

<ul>
    <li class="menu1"><a href="#">Menu 1</a>
        <section class="nav-menu1">
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
        </section>
    </li>
</ul>

我想制作一个DIV背景(没有背景颜色)闪烁红色然后再次空白.现在我使用JS将新的CLASS(添加红色)添加到有问题的DIV和CSS3中,为背景颜色添加一个缓动.但它减轻了它,我想要的是它去RED然后放松.我想我可以通过使用JS在延迟后添加多个CLass来做到这一点.但CSS3可以完全用来做这件事吗？

如何使用 Compass这个Jsfiddle进行多个css转换？

我想要做的是用Compass编写下面这段代码.

-webkit-transition: top 0.3s ease-out, background .9s .5s ease-out; 
   -moz-transition: top 0.3s ease-out, background .9s .5s ease-out; 
     -o-transition: top 0.3s ease-out, background .9s .5s ease-out; 
        transition: top 0.3s ease-out, background .9s .5s ease-out;

所以我之前使用过CSS转换,但我有一个独特的案例.我正在编写一个用于创建模态的自定义插件.基本上我会动态创建一个div document.createElement('div')并将其附加到几个类的身体上.这些类定义颜色和不透明度.我想严格使用CSS来淡入这个div,但是进行状态更改似乎很难b/c它们需要一些用户交互.

尝试了一些高级选择器希望它会改变状态,尝试媒体查询希望改变状态...寻找任何想法和建议,我真的想在CSS中保留这个如果可能

我想停止正在进行的转换.

我发现一些散布在互联网上的参考文献[1] [2],但我似乎无法把它拼凑在一起.

这是第一个建议的小提琴(用jQuery和CSS Transit作为上下文):http://jsfiddle.net/thomseddon/gLjuH/

谢谢

[1] https://twitter.com/evilhackerdude/status/20466821462

[2] github.com/madrobby/zepto/issues/508

基本上,"highlight"类通过mouseenter上的javascript动态添加到具有"edge"类的元素.在mouseleave上删除了突出显示类.我想转换这些元素的边框颜色.但是,此"突出显示"类也会修改堆栈顺序.我希望在转换开始之前(在mouseenter上)在所有突出显示的边上设置z-index为1,并且我希望在转换完成后移除z-index为1(在mouseleave上).目前,在删除"highlight"类后立即重置z-index属性.

基本设置:

.edge {

    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;

    transition-property: border-color;
    -moz-transition-property: border-color;
    -o-transition-property: border-color;
    -webkit-transition-property: border-color;
}

.edge.highlight {
    border-color: hsl(0, 0%, 85%);
    z-index: 1;
}

第一次尝试(显然延迟修复了一端的时间并将其混淆在另一端):

.edge {
    border-color: hsl(0, 0%, 40%);
    border-style: solid;
    border-width: (set appropriately in another selector);

    transition-duration: 1s, 0;
    -moz-transition-duration: 1s, 0;
    -o-transition-duration: 1s, 0;
    -webkit-transition-duration: 1s, 0;

    transition-delay: 0, 1s;
    -moz-transition-delay: 0, 1s;
    -o-transition-delay: 0, 1s;
    -webkit-transition-delay: 0, …

有没有办法让按钮的背景颜色从灰色变为蓝色,然后仅使用css3变回灰色？一个很好的例子是默认操作按钮是可可吗？我知道这可以在javascript中完成,但我宁愿只使用css.

我需要一个特殊transitionend的事件,在所有转换完成后触发一次,或者如果CSS中没有定义转换则立即触发.

这就是我到目前为止所得到的:

(function($){

  $.event.special.transitionsComplete = {

    setup: function(data, namespaces, eventHandle){    
      var queue = [],
          style = window.getComputedStyle(this, null),
          computedProps = style.getPropertyValue('transition-property').split(', '),
          computedDurations = style.getPropertyValue('transition-duration').split(', '),
          $node = $(this);          

      // only count properties with duration higher than 0s
      for(var i = 0; i < computedDurations.length; i++)
        if(computedDurations[i] !== '0s')
          queue.push(computedProps[i]);           

      // there are transitions
      if(queue.length > 0){
        $node.on('webkitTransitionEnd.x transitionend.x', function(e){          
          queue.splice(queue.indexOf(e.originalEvent.propertyName));          
          if(queue.length < 1)
            $node.trigger('transitionsComplete');
        });

      // no transitions, fire (almost) immediately
      }else{
        setTimeout(function(){
          $node.trigger('transitionsComplete');
        }, 5);

      } …

我试图在段落的文本上实现以下动画:

目的是根据左侧的形状设置文本边界的动画.这是我尝试过但我无法弄清楚文本形状的过渡:

.mainDiv {
  width: 600px;
  margin: 0px auto;
  border: solid 1px #000;
  padding: 10px;
  min-height: 200px;
}
.element {
  width: 200px;
  height: 200px;
  background: #e3f5f1;
  float: left;
  margin-right: 5px;
}
.textElement {
  width: 395px;
  float: left;
}

<div class="mainDiv">
  <div class="element"></div>
  <div class="textElement">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type …

我试图理解CSS transition-delay属性的负值.请先查看代码示例.有两个divs具有不同的转换延迟.

我认为给延迟的负值与给right div(0.2s)给出一个正值是一样的,但它的行为不一样.我认为它不会0.2s使转换变得过分.

• 任何人都可以解释一下负面transition-delay价值做什么？
• 是transition-delay有效的负值,还是应该不使用？
• 如果可以使用它们,那么什么是好用例？

function toggle() {
  var left = document.querySelector('.left');
  var right = document.querySelector('.right');
  left.classList.toggle('hidden');
  right.classList.toggle('hidden');
  left.classList.toggle('show');
  right.classList.toggle('show');
}
window.setInterval(toggle, 1500);
window.setTimeout(toggle, 100);

#container {
  background: yellow;
  display: flex;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.left,
.right {
  flex: 1;
}
.left {
  background: red;
  transition: transform 1s -0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.right {
  background: blue;
  transition: transform 1s cubic-bezier(0.19, 1, …