Question

最近，我一直在尝试创建动画效果，在此我使用隐藏在父跨度上的溢出，然后将其转换为视图。我当前的代码似乎有点复杂，并且考虑到它的作用，我想在整个网站上大量使用它，我想知道是否还有其他解决方法。

    $(".in1").addClass("error").delay(125).queue(function(next){
        $(this).addClass('in1-active');
    });
    $(".in2").addClass("error").delay(250).queue(function(next){
        $(this).addClass('in2-active');
    });
    $(".in3").addClass("error").delay(375).queue(function(next){
        $(this).addClass('in3-active');
    });

.inwrap {
    overflow: hidden;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.in1, .in2, .in3{
    display: block;
    transition: transform 1s cubic-bezier(0,1,.82,1);
    transform: translateY(101%);
}
.in1-active, .in2-active , .in3-active  {
    display: block;
    transform: translateY(0px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="introduction">
  <h2>
    <span class="inwrap"><span class="in1"><a href="#about-me">Graphic designer</a> that </span></span>
    <span class="inwrap"><span class="in2">specializes in <a href="#days-of-ux">interactive</a></span></span>
    <span class="inwrap"><span class="in3"> design and <a href="#struggle-magazine">print</a></span></span>
  </h2>
</div>

Answer 1

无需处理单独的点击。您可以使用通配符并处理所有单击。

public class MainActivity extends Activity {

private static final int MISSED_CALL_TYPE = 0;
private TextView txtcall;

@Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    txtcall = (TextView) findViewById(R.id.call);

    StringBuffer sb = new StringBuffer();
    Cursor managedCursor = managedQuery(CallLog.Calls.CONTENT_URI, null,
            null, null, null);
    int number = managedCursor.getColumnIndex(CallLog.Calls.NUMBER);
    int type = managedCursor.getColumnIndex(CallLog.Calls.TYPE);
    int date = managedCursor.getColumnIndex(CallLog.Calls.DATE);
    int duration = managedCursor.getColumnIndex(CallLog.Calls.DURATION);
    sb.append("Call Details :");
    while (managedCursor.moveToNext()) {
        String phNumber = managedCursor.getString(number);
        String callType = managedCursor.getString(type);
        String callDate = managedCursor.getString(date);
        Date callDayTime = new Date(Long.valueOf(callDate));
        String callDuration = managedCursor.getString(duration);
        String dir = null;
        int dircode = Integer.parseInt(callType);
        switch (dircode) {

        case CallLog.Calls.OUTGOING_TYPE:
            dir = "OUTGOING";
            break;

        case CallLog.Calls.INCOMING_TYPE:
            dir = "INCOMING";
            break;

        case CallLog.Calls.MISSED_TYPE:
            dir = "MISSED";
            break;
        }
        sb.append("\nPhone Number:--- " + phNumber + " \nCall Type:--- "
                + dir + " \nCall Date:--- " + callDayTime
                + " \nCall duration in sec :--- " + callDuration);
        sb.append("\n----------------------------------");
    }
    managedCursor.close();
    txtcall.setText(sb);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.activity_main, menu);
    return true;
}

} 

<uses-permission android:name="android.permission.READ_CONTACTS"/>
<uses-permission android:name="android.permission.READ_LOGS"/>

$('[class^=in]').addClass("error").delay(125).queue(function(next) {
  var cls = $(this).attr('class');
  cls = cls + "-active";
  $(this).addClass(cls);
});

.inwrap {
    overflow: hidden;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.in {
    display: block;
    transition: transform 1s cubic-bezier(0,1,.82,1);
    transform: translateY(101%);
}
.in-active{
    display: block;
    transform: translateY(0px);
}

Answer 2

找到了一种使用setTimeout的方法。

    $('.in').each(function(i){
        var row = $(this);
      setTimeout(function() {
              row.addClass('in-active');
          }, 150*i);

    });

.inwrap {
    overflow: hidden;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.in {
    display: block;
    transition: transform 1s cubic-bezier(0,1,.82,1);
    transform: translateY(101%);
}
.in-active{
    display: block;
    transform: translateY(0px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="introduction">
  <h2>
    <span class="inwrap"><span class="in"><a href="#about-me">Graphic designer</a> that </span></span>
    <span class="inwrap"><span class="in">specializes in <a href="#days-of-ux">interactive</a></span></span>
    <span class="inwrap"><span class="in"> design and <a href="#struggle-magazine">print</a></span></span>
  </h2>
</div>

寻找一种更有效的方法来隐藏这种溢出并在文本上翻译动画

2 个答案: