a:active plus animation click invalid solution

We often encounter a problem, a:activeaddanimation click is invalid, today I will show you my code and the solution, and by the way, I will share with you how not to Method to record url jump history.

a tag: active plus animation click is invalid

My css code is as follows:

.haorooms{  -webkit-animation: jpyd 1.5s cubic-bezier(0,.98,.44,1) both;  animation:  jpyd 1.5s cubic-bezier(0,.98,.44,1) both;}
.haorooms:active{ -webkit-animation: zoomOuts 1s ; animation: zoomOuts 1s; }

html code is as follows:

<a class="haorooms delay3 " href="/jingpin/"  ></a>

In Apple mobile phone , a label click is invalid. After checking, the a tag is not blocked. What is the reason? How to solve?

The reason for this situation is that active has a 1-second animation. If you press and hold the button, there is no way to jump.

a tag: active plus animation click invalid solution

In fact, there are many solutions to this problem, because we are displaying it on the mobile phone, and the expected effect is to jump after the animation is played. We can add the ontouchend event and jump to an address after touchend.

ontouchend="window.location.href='/jingpin/'"

After adding this, you can jump to the specified address whether you long press or click. After pressing the end, you can jump to the specified address.

Page jump history is not recorded when returning

Regarding storing browsing history, I have mentioned it in previous articles: Some introductions to SPA single-page web applications and ajax non-refresh page switching, history Record Back Forward Solution

We can operate the browser history through

history.replaceState 
history.pushState(state, title, url)

.

But in actual situations, there are also situations where we do not need to record browsing history. For example, "There are two tab switching labels in a page. The tab switching changes the browser address." The tab switching is recorded in the history by default. . Therefore, when we click the return button, we keep switching between two tabs. However, we actually want to return to the previous page, not switch between two tabs. So how to solve this situation?

We thought of this

location.replace(newURL)

replace() method will not generate a new record in the History object. When using this method, the new URL will overwrite the current record in the History object.

So we can write the code as follows:

<ul id="haorooms">
  <li><a href="http://www.haorooms.com/archives">标签一</a></li>
  <li><a href="http://www.haorooms.com/tools/index">标签二</a></li>
</ul>
$(&#39;#haorooms li  a&#39;).on(&#39;click&#39;, function (event) { //tab中a标签点击
    event.preventDefault();
    location.replace(this.href);
})

The above code returns invalid in some mobile phones, so the solution fails!

history.replaceState() and location.replace() methods

If the above method failed, I had to change my mind. I saw that Zhang Xinxu had a similar case solution some time ago. So I learned from it!

The solution is as follows:

$('#haorooms li  a').on('click', function (event) {
    event.preventDefault();
    history.replaceState(null, document.title, this.href.split('#')[0] + '#');
    location.replace('');
})

First replace the current URL address with the current link address ending with a pound sign # through the HTML5 history.replaceState() method;

Execute location.replace('') ​​refreshes the current address (# will be ignored at this time);

Through this solution, no matter how we switch tabs, after clicking return, we will return to the previous page of the entered page as usual. No more switching between tabs!

Because history.replaceState is only supported from IE10, if you want to be compatible with earlier browsers, or use it on PC. Seeing that Zhang Dashen also encapsulated a function, I will borrow it here:

var fnUrlReplace = function (eleLink) {
    if (!eleLink) {
        return;
    }
    var href = eleLink.href;
    if (href && /^#|javasc/.test(href) === false) {
        if (history.replaceState) {
            history.replaceState(null, document.title, href.split('#')[0] + '#');
            location.replace('');
        } else {
             location.replace(href);
        }
    }
};

The above function can be applied as follows

$('#haorooms li  a').on('click', function (event) {
  if (event && event.preventDefault) {
      event.preventDefault();
   }
   fnUrlReplace(this);
   return false;
})

I believe you have mastered the method after reading these cases. Please pay attention for more exciting things. Other related articles on php Chinese website!

Related reading:

How to write if condition hack in CSS

CSS web page misalignment How to deal with it

How to use CSS3 to create text animation under lighting

The above is the detailed content of a:active plus animation click invalid solution. For more information, please follow other related articles on the PHP Chinese website!