Question

我在＆＃34; toogle＆＃34;上遇到了CSS问题要从两种不同形式切换的元素。

正如您可以在此处看到https://jsfiddle.net/7o6mchvn/交换机左侧的:: before元素（内容文字），转换不会转到右侧。

#formSwitch li a span::before{content:attr(data-letters); position:absolute; color:#fff; overflow:hidden; white-space:nowrap; width:0%; -webkit-transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1); transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1);}
#formSwitch li a.selected span::before{width:100%;}

绿色部分向右移，但文字向左移动。

我无法找到解决此问题的方法。有任何想法吗？

Answer 1

I think this is what you need, Please check the below code, i have added two lines here

#switchIngr a span:before{ 
   right:0;
}

#switchHour a span:before { 
   left:0;
}

Please check with the snippet

$( "#formSwitch a" ).click(function() {
  $( "#formSwitch a" ).each(function() {
    if ($(this).hasClass('selected')){
      $(this).removeClass('selected'); 
    } else {
      $(this).addClass('selected');
    }
  });
});

#formRightSide #formSwitch{position:relative; text-align:center; text-transform:uppercase; font-size:.6em; line-height:1.1em;}
#formSwitch li{position:relative; display:inline-block; background:red ; color:#999; -webkit-transform: translate3d(0,0,0);}
#formSwitch li#switchIngr{border-top-left-radius:11px; border-bottom-left-radius:11px;}
#formSwitch li#switchHour{border-top-right-radius:11px; border-bottom-right-radius:11px;}
#formSwitch li a{display:inline-block; overflow: hidden; line-height: 1; color: #999; text-decoration:none;}
#formSwitch li#switchIngr a{padding:.6em .6em .6em 1em; border-top-left-radius:11px; border-bottom-left-radius:11px;}
#formSwitch li#switchHour a{padding:.6em 1em .6em .6em; border-top-right-radius:11px; border-bottom-right-radius:11px;}
	
#formSwitch li a::after{content:''; position:absolute; height:100%; width:0%; top:0; z-index:-1; background:#58bb9c; -webkit-transition: width 0.65s cubic-bezier(0.7, 0.3, 0, 1); transition: width 0.65s cubic-bezier(0.7, 0.3, 0, 1);}
#formSwitch li#switchIngr a::after{right:0; border-top-left-radius:11px; border-bottom-left-radius:11px;}
#formSwitch li#switchHour a::after{left:0; border-top-right-radius:11px; border-bottom-right-radius:11px;}
#formSwitch li a.selected::after{width: 100%;}
	
#formSwitch li a span {position:relative; display:block;}
#formSwitch li a span::before{content:attr(data-letters); position:absolute; color:#fff; overflow:hidden; white-space:nowrap; width:0%; -webkit-transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1); transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1);}
#formSwitch li a.selected span::before{width:100%;}
#switchIngr a span:before{ right:0;}
#switchHour a span:before { left:0;}

<ul id="formSwitch">
  <li id="switchIngr">
    <a href="#" class="selected">
      <span data-letters="ingredient">ingredient</span>
    </a>
  </li><li id="switchHour">
  <a href="#">
    <span data-letters="hour">hour</span>
  </a>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

also check with the fiddle link click here

Answer 2

#formSwitch li a span::before{
    content:attr(data-letters);
    position:absolute;
    color:#fff;
    overflow:hidden;
    white-space:nowrap;
    width:0%;
    -webkit-transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1);
    transition: all 0.65s cubic-bezier(0.7, 0.3, 0, 1);
}
#formSwitch li:last-child a span::before{
    left:0;
}
#formSwitch li:first-child a span::before{
    right:0;
}

Answer 3

更新了css代码，我认为你正在寻找这个，当绿框移动白色文本应该相应显示。替换css代码，让我知道这是否有效或您正在寻找其他东西。此外，如果您将动画速度从3秒减慢到7秒，则可以清楚地看到您正在寻找的动画类型。

public class DeleteButtonCellEditor extends AbstractCellEditor implements
TableCellEditor {

private JButton button = new JButton();

private static final long serialVersionUID = 1L;

public DeleteButtonCellEditor(){
    button.addActionListener(new ActionListener(){
        @Override
        public void actionPerformed(ActionEvent arg0) {
              //Perform Button Actions
        }
    });
}

@Override
public Object getCellEditorValue() {
    return "Delete";
}

@Override
public Component getTableCellEditorComponent(JTable arg0, Object arg1, boolean arg2, int arg3, int arg4) {
    return button;
}
}

在:: before元素之前的宽度转换

3 个答案: