Question

我在（animationend）上使用jquery来检测动画是否完成并触发回调。我的问题是animationend事件触发每个childelement im动画使用CSS3。

是否有任何方式$.when来检测是否已触发所有animationend事件且动画已完成？那怎么样？

我正在使用css3动画

我的HTML示例

  <div class="parent">
   <div class="child"></div>
  <div class="child2"></div>
  </div>

父和子容器在CSS中定义了自己的动画

  .parent.start-animation { animation: sample-animation 3s forwards }
  .parent.start-animation .child1 { animation: another-sample-animation 3s forwards }
  .parent.start-animation .child1 { animation: another-another-sample-animation 3s forwards }

我当下的Javascript

  function getAnimationEvent(){ 
      var t;
      var el = document.createElement("fakeelement");

      var animations = {
        "animation"      : "animationend",
        "OAnimation"     : "oAnimationEnd",
         "MozAnimation"   : "animationend",
         "WebkitAnimation": "webkitAnimationEnd"
       }

       for (t in animations){
         if (el.style[t] !== undefined){
            return animations[t];
          }
        }
    }


  var animationend = getAnimationEvent();

  $('.parent').addClass('start-animation').on(animationend, function(e) {
      // triggered 3 times - parent, child, child2


      // detect if it is the current element
      if ($(e.target).attr('class') == "parent") {
          // do somethng
      }

  });

 // I wont to do something like that
 $('.parent').addClass('start-animation').when(animationend).then(function() {
    // do something
});

Answer 1

您正在为一个类属性调用动画函数，因此这是火，请为每个函数单个类或在下面调用：

 $(document).ready(function() {
  $(/*class name*/).click(
      $(this).parent(/*Parent class or ID*/).animate({/*Animation Effect or CSS Attribute here*/}, /*Event Firing Time*/);
})
/*
----------------------------
OR
----------------------------
*/
$( window ).load(function() {
   $(/*class name*/).click(
      $(this).parent(/*Parent class or ID*/).animate({/*Animation Effect or CSS Attribute here*/}, /*Event Firing Time*/);
  )
});

如果您想了解更多相关信息，请访问： Javascript Solution

Answer 2

您可以添加动画完成时调用的函数：

import React,{ Component } from 'react';
import { Field,reduxForm } from 'redux-form';
import { Text,Input } from 'react-native-elements';
import { View,Button } from 'react-native';
import {Icon,CheckBox} from 'react-native-elements';
 const renderField=({label,keyboardType,name,icon,iconType,input:{onChange,...restInput}}) => {
    return(
            <View style={{flexDirection:'row'}}>
                <Input onChangeText={onChange} {...restInput} keyboardType={keyboardType} placeholder={label} inputContainerStyle={{borderWidth:2,borderColor:'lightgrey',borderRadius:20}} inputStyle={{color:'grey'}} leftIcon={<Icon size={25} type={iconType} name={icon} color="grey" />} errorStyle={{fontSize:15}} errorMessage="error" />
            </View>
    )
}
 const checkBoxField=({label,keyboardType,name}) => {
 var val=true;

    return(
            <View >
                <View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                    <Text style={{fontSize:18}}>{label}</Text>
                    <CheckBox  title='Male' checkedIcon='dot-circle-o' uncheckedIcon='circle-o'   containerStyle={{backgroundColor:'transparent',borderWidth:0,padding:0}} textStyle={{fontSize:18}} />     
                    <CheckBox  title='Female' checkedIcon='dot-circle-o' uncheckedIcon='circle-o'  containerStyle={{backgroundColor:'transparent',borderWidth:0,padding:0}} textStyle={{fontSize:18}} />
                </View>
                <View><Text style={{fontSize:15,color:'red'}}>error</Text></View>
            </View>
    )
}
const submit = values => {
  console.log('submitting form', values)
}
const RegisterForm=props => {
    const {handleSubmit}=props;
    return(
            <View style={{flex:1,flexDirection:'column',margin:20,justifyContent:'flex-start',alignItems:'center'}}>

                <Field label="Username" component={renderField} name="username" icon="user" iconType="font-awesome" />
                <Field label="Email" component={renderField} name="email" icon="email" iconType="zocial" />
                <Field label="Gender" component={checkBoxField} name="gender" />
                <Button title='SUBMIT'  onPress={handleSubmit(submit)}  />
            </View>
    )
}
const Register=reduxForm({
    form:'register',

})(RegisterForm);
export default Register;

这似乎是最简单的，但是使用代码片段，您很难为您的问题提供完整的解决方案。

jQuery when（）在多个animationend事件上

2 个答案: